编写CSS转换的最简洁方法

Question

是否有更简洁的方法来编写以下代码？

element{
    transition: all 700ms linear,
        transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

我要做的是将不同的转换计时功能应用于转换和背景属性,而对其余属性使用线性转换计时功能.这是正常的,但我试图尽可能保持干燥.

Answer 1

你在这里做的并不多.您可以单独指定转换持续时间:

element{
    transition: all linear,
        transform cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
}

但那是关于它的.由于逗号分隔的转换值的工作方式,您无法仅指定一次自定义曲线.整个值列表按指定顺序重复,而不是无限重复最后一个值.

也就是说,如果你这样做:

element{
    transition-property: all, transform, background;
    transition-duration: 700ms;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

什么情况是,缺少的值transition-timing-function被填充为linear,而不是您的自定义曲线.结果与您的预期转换不符background.

如果您尝试通过更改过渡属性的顺序来利用这一点,那么background取而代之的是自定义曲线的缺失值:

element{
    transition-property: transform, all, background;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear;
}

什么情况是,该all过渡将覆盖的transform转变,即使您单独指定,因为all是后话,它包括任何先前列出的属性.