编写CSS转换的最简洁方法

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

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

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

最佳答案

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

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

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

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

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

发生的情况是,transition-timing-function的缺失值填充为线性,而不是自定义曲线.结果与您预期的背景转换不符.

如果您尝试通过更改过渡属性的顺序来利用这一点,那么背景的缺失值将取代您的自定义曲线：

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

会发生的是,即使您单独指定了转换,所有转换也将覆盖转换转换,因为全部转换后来包含任何先前列出的属性.