CSS过渡速记有多个属性？

Question

我似乎找不到具有多个属性的CSS转换速记的正确语法.这没有做任何事情:

.element {
  -webkit-transition: height .5s, opacity .5s .5s;
     -moz-transition: height .5s, opacity .5s .5s;
      -ms-transition: height .5s, opacity .5s .5s;
          transition: height .5s, opacity .5s .5s;
  height: 0;
  opacity: 0;
  overflow: 0;
}
.element.show {
  height: 200px;
  opacity: 1;
}

我用javascript添加show类.元素变得更高且可见,它不会过渡.在最新的Chrome,FF和Safari中进行测试.

我究竟做错了什么？

编辑:为了清楚,我正在寻找速记版本来缩小我的CSS.所有供应商前缀都足够臃肿.还扩展了示例代码.

Answer 1

句法:

transition: <property> || <duration> || <timing-function> || <delay> [, ...];

请注意,如果指定了后者,则持续时间必须在延迟之前.

个人转换结合在速记声明中:

-webkit-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-moz-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
-o-transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;
transition: height 0.3s ease-out, opacity 0.3s ease 0.5s;

或者只是将它们全部转换:

-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;

这是一个简单的例子.这是另一个具有延迟属性的.

编辑:此前列出的是兼容性和已知问题transition.删除以方便阅读.

底线:只需使用它.对于所有应用程序,此属性的性质不会中断,并且全球的兼容性现在远高于94%.

如果您仍想确定,请参阅http://caniuse.com/css-transitions

Answer 2

如果你想要以相同的方式转换几个特定的​​属性(因为你也有一些特别不希望转换的属性,比如说opacity),另一种选择就是做这样的事情(为简洁起见省略了前缀):

.myclass {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖了all它上面的速记声明,并使(偶尔)更简洁的代码.

演示

Answer 3

我用这个:

element{
   transition : height 3s ease-out, width 5s ease-in;
}

Answer 4

需要注意的一件重要事情是 CSStransition属性本身是一种简写 -正如MDN Web 文档中提到的：

CSS属性是、、和transition的简写属性。transition-propertytransition-durationtransition-timing-functiontransition-delay

这种简写的理想用途是结合单个转换的各种成分属性。如果这用于组合多个过渡，它将开始变得笨拙。

因此，当同一元素上有两个以上具有不同组成属性的转换时，单独编写它们而不是使用简写变得更容易transition。例如：

这是一个元素上的多个转换的简写版本（选项 1）：

transition: transform 0.5s ease-in-out, box-shadow 0.2s ease-out, filter 0.1s ease-out, color 0.25s ease-in 0.2s;

正如您所看到的，这变得很笨拙并且有点难以可视化。
可以像这样应用相同的 CSS（选项 2）：

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s, 0.2s, 0.2s, 0.25s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s

当然，最终这一切都取决于您对输入和维护源代码的偏好。但我个人更喜欢第二种选择。

提示：

使用此功能的另一个好处是，如果所有转换的构成属性之一都相同，则无需多次提及它。例如，在上面的例子中，如果所有的transition-duration都是相同的（0.5s），你可以这样写：

transition-property: transform, box-shadow, filter, color;
transition-duration: 0.5s;
transition-timing-function: ease-in-out, ease-out, ease-out, ease-in;
transition-delay: 0s, 0s, 0s, 0.2s