使用多个 CSS 类进行转换

Question

是否可以使用多个css类进行转换？

如果我有这个 CSS：

.fade {
  opacity: 0;
  transition: opacity .5s linear;
}
.left {
  left: 10px;
  transition: left .3s ease;
}

然后我不能在 1 个 html 元素上使用 2 个类，一个过渡属性将覆盖另一个。我知道我可以创建一个 .fade-left 类，它可以同时做这两件事（见这个问题），但我想保持这种模块化。

有没有办法添加两个过渡？

Answer 1

您需要使用这种方式来使用多个过渡：

transition: opacity .5s linear, left .3s ease;

扩展方式：

-webkit-transition: opacity .5s linear, left .3s ease;
   -moz-transition: opacity .5s linear, left .3s ease;
    -ms-transition: opacity .5s linear, left .3s ease;
        transition: opacity .5s linear, left .3s ease;

由于另一个类不会更改 left 属性，因此您无需担心。以简单的方式，您可以使用 all .