使用几个css类进行转换

Question

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

如果我有这个CSS：

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

然后我不能在1个html元素上使用2个类，一个转换属性将覆盖另一个。 我知道我可以创建一个类.fade-left，它可以同时执行（请参阅this question），但我希望保持这种模块化。

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

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。