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

以上所有内容都使用linear定时功能，除了background和transform。 我觉得这是性能和 DRY CSS 之间的一个很好的折衷方案。 我做了一个jsFiddle供您查看各种选项 - 注释掉不同的CSS以尝试每种方式：

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

Answer 3

据我所知(经过快速谷歌搜索(，您当前的方法是做您想要的事情的最短(因此也是最"DRY"(的方法。当然，我不是CSS大师，所以我可能完全错了。