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;
}
会发生的是,即使您单独指定了转换,所有转换也将覆盖转换转换,因为全部转换后来包含任何先前列出的属性.
