具有多个属性的 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 {
    transition: all 200ms ease;
    transition-property: box-shadow, height, width, background, font-size;
}

第二个声明覆盖了它上面的简写声明中的all，并使得（偶尔）更简洁的代码。

/* prefixes omitted for brevity */
.box {
    height: 100px;
    width: 100px;
    background: red;
    box-shadow: red 0 0 5px 1px;
    transition: all 500ms ease;
    /*note: not transitioning width */
    transition-property: height, background, box-shadow;
}

.box:hover {
  height: 50px;
  width: 50px;
  box-shadow: blue 0 0 10px 3px;
  background: blue;
}

<p>Hover box for demo</p>
<div class="box"></div>

Demo

Answer 2

需要注意的重要一点是 CSS transition 属性本身是一种简写形式 - 正如 MDN Web Docs 中提到的那样：

transition CSS 属性是transition-property、transition-duration、transition-timing-function 和transition-delay 的简写属性。

此速记的理想用途是组合单个转换的各种Constituent properties。如果这用于组合多个转换，它将开始变得笨拙。

因此，当您在同一元素上有超过 2 个具有不同组成属性的转换时，单独编写它们而不是使用 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

Answer 3

我认为这应该可行：

.element {
   -webkit-transition: all .3s;
   -moz-transition: all .3s;
   -o-transition: all .3s;
   transition: all .3s;
}

Answer 4

我让它工作了：

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

Answer 5

这帮助我理解/简化了我需要制作动画的内容：

// SCSS - Multiple Animation: Properties | durations | etc.
// on hover, animate div (width/opacity) - from: {0px, 0} to: {100vw, 1}

.base {
  max-width: 0vw;
  opacity: 0;

  transition-property: max-width, opacity; // relative order
  transition-duration: 2s, 4s; // effects relatively ordered animation properties
  transition-delay: 6s; // effects delay of all animation properties
  animation-timing-function: ease;

  &:hover {
    max-width: 100vw;
    opacity: 1;

    transition-duration: 5s; // effects duration of all aniomation properties
    transition-delay: 2s, 7s; // effects relatively ordered animation properties
  }
}

~ 这适用于 '.base' 类中的所有转换属性（持续时间、转换时间函数等）

Answer 6

语法：

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;

这里是a straightforward example。这是另一个with the delay property。

---

编辑：之前在此处列出的是有关transition 的兼容性和已知问题。为便于阅读而删除。

底线：使用它。此属性的性质对所有应用程序都不会造成破坏，并且现在全球兼容性远高于 94%。

如果你还想确定，请参考http://caniuse.com/css-transitions

Answer 7

通过在转换 opacity 属性时有 0.5 秒的延迟，元素将在其高度转换的整个过程中完全透明（因此不可见）。因此，您实际上会看到的唯一一件事就是不透明度发生了变化。因此，您将获得与将 height 属性排除在过渡之外的相同效果：

"过渡：不透明度 .5s .5s;"

这就是你想要的吗？如果不是，并且您希望看到高度过渡，那么在过渡的整个过程中，不透明度都不能为零。