编写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后来包含任何先前列出的属性。

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 ，则所有额外属性将默认为transition-property列出的第一个值作为其默认值。 因此，首先放置一个linear （默认）值，然后枚举所有独特的计时函数以匹配正确的属性，然后您修改到最后的任何属性（如width ）将自动默认为linear ！ 因此，即使您在属性列表的末尾添加了5个属性，只有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);
}

上面的所有内容都使用除background和transform之外的linear定时功能。 我觉得这是性能和DRY CSS之间的良好折衷。 我为你制作了一个jsFiddle来查看各种选项 - 注释掉不同的CSS来尝试各种方式：

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

Answer 3

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