具有多个属性的 CSS 转换简写？

小编典典

具有多个属性的 CSS 转换简写？

all

我似乎找不到具有多个属性的 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。所有的供应商前缀都已经够臃肿了。还扩展了示例代码。

阅读 79

2022-03-06

共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%。

2022-03-06