使用几个css类进行转换

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

如果我有这样的CSS：

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

那么我就不能1个html元素上使用的2类，一个过渡性质将覆盖其他。 我知道我可以创建一个类.fade-left可以同时执行（请参阅this question），但我希望保持这种模块化。

有没有办法添加两个转换？

来源

2016-04-26 Elodie Prevot

拥有多个设置相同属性的类与使单个类设置两次相同属性没有区别。 – cimmanon

@cimmanon不会重写转换吗？ –

@PraveenKumar这就是我想要做的。如果我写'.foo {color：red} .bar {color：green}'，它与编写'.foo.bar {color：red;颜色：绿色}'。 – cimmanon

你需要用这种方式使用多个转变：

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。

来源

2016-04-26 12:36:07

谢谢你的帮助，但这是我想写的东西，如果我想创建一个.fade-left类，我不这样做。当我想要一个按钮是大红色的时候，我可以添加2个.big和.red类，不需要创建一个.big-red类，因为它们改变了2个独立的CSS属性。左边的过渡和不透明的过渡也是两个独立的行为，我认为有一种方法可以保留这些独立的类。 –

@ElodiePrevot我不认为这是可能的。 –

使用几个css类进行转换

回答

相关问题