Question

  -webkit-transition: width 0.4s, height 0.4s;
     -moz-transition: width 0.4s, height 0.4s;
       -o-transition: width 0.4s, height 0.4s;
          transition: width 0.4s, height 0.4s;

这会在动画/移动时影响div元素的大小，但我也需要调整它的不透明度：

  -webkit-transition: opacity 0.4s ease-out;
   -moz-transition: opacity 0.4s ease-in;
    -o-transition: opacity 0.4s ease-in;
     transition: opacity 0.4s ease-in;

这些是在我的样式表中一个接一个地进行，还是有办法将它们组合成一个？有最好的做法吗？

Answer 1

只需使用逗号分隔属性以便将它们组合起来（就像你自己在第一个例子中所做的那样）

-webkit-transition: width 0.4s, height 0.4s,opacity 0.4s ease-in;
transition: width 0.4s, height 0.4s,opacity 0.4s ease-in;

Codepen Demo

<小时/> 只是为了完整性：以下是来自the spec的过渡属性的正式语法：

价值：无| <single-transition-property> [ ‘,’ <single-transition-property> ]*

这表示当用逗号分隔时，可能会转换多个属性。

一行中有多个webkit转换

1 个答案:

Codepen Demo