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);
}

我尝试做的是将不同的转换计时功能应用于转换和背景属性，而对其余属性使用线性转换计时功能。这是正常的，但我试图将其保留为 DRY 。

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转换，因为{{1}}稍后出现，它包括任何先前列出的财产。

Answer 2

嗯，最干的方法是使用类似SASS的东西并编写一个mixin，然后使用它而不是在任何地方复制粘贴代码。我要做的另一个建议是避免使用all，而是通过线性转换枚举您想要设置动画的属性。虽然这可能更冗长，但我愿意打赌它会更有效率，特别是如果你曾将图形要求较高的东西（如box-shadow）放入元素的风格中。

所以，虽然你的方式会起作用，但我觉得你拥有的转变越独特，这个配方就越有价值：

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

当然，我建议枚举属性，以避免昂贵和未经请求的动画。在这种情况下，这样的事情更有意义：

element {
    transition-duration: 2s;
    transition-property: height, background, transform, width;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear;
}

编辑：正如@BoltClock所提到的，我对这个粗体文本下面的所有内容都错了，所以请忽略它。逗号分隔的参数再次按照它们最初指定的顺序应用 - 既不是第一次也不是最后一次重复其他transition-property值。我仍然认为我所说的关于不使用all的内容是对性能和未来证明范围的重要建议！

记下我如何排序参数：如果transition-property的参数多于transition-timing-function，则所有额外属性将默认为列出的 first 值以transition-property为默认值。因此，首先放置linear（默认）值，然后枚举所有唯一的计时函数以匹配正确的属性，然后您修改到最后的任何属性（如width）将自动默认为{ {1}}！因此，即使您在属性列表的末尾添加了5个属性，也只有linear和background具有唯一的transform计时功能。例如：

cubic-bezier

上述所有内容均使用除element { transition-duration: 2s; transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp; transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5); }和linear之外的background计时功能。我觉得这是性能和DRY CSS之间的良好折衷。我为你制作了一个jsFiddle来查看各种选项 - 注释掉不同的CSS来尝试各种方式：

http://jsfiddle.net/530cumas/4/

Answer 3

就我的CSS知识而言（在快速谷歌之后），您当前的方法是最短的（因此，最“干”）方式来做你想要的。当然，我不是CSS大师，所以我可能完全错了。

编写CSS转换的最简洁方法

3 个答案: