具有多个属性的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

如果您有想要以同样的方式过渡几个特定的属性（因为你也有你特别一些属性并不想转型，比方说opacity），另一种选择是做这样的事情（略去了前缀）：.myclass {&nbsp; &nbsp; transition: all 200ms ease;&nbsp; &nbsp; transition-property: box-shadow, height, width, background, font-size;}第二个声明会覆盖其all上方的简短声明中的，并（有时）使代码更简洁。/* prefixes omitted for brevity */.box {&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; background: red;&nbsp; &nbsp; box-shadow: red 0 0 5px 1px;&nbsp; &nbsp; transition: all 500ms ease;&nbsp; &nbsp; /*note: not transitioning width */&nbsp; &nbsp; transition-property: height, background, box-shadow;}.box:hover {&nbsp; height: 50px;&nbsp; width: 50px;&nbsp; box-shadow: blue 0 0 10px 3px;&nbsp; background: blue;}<p>Hover box for demo</p><div class="box"></div>

Answer 2

通过在过渡不透明度属性时延迟0.5秒，元素在整个高度过渡期间将完全透明（因此不可见）。因此，您真正看到的唯一一件事就是不透明度发生变化。因此，您将获得与将height属性保留在过渡之外相同的效果：“过渡：不透明度.5s .5s；”那是你想要的吗？如果不是这样，并且您希望看到高度过渡，则在过渡的整个过程中，透明度都不能为零。