我有一个包含两个类的元素:
<div class="class1 class2"></div>
.class1 {transition: background-color 0.4s;}
.class2 {transition: top 1s;}
问题是 class2
的转换覆盖了 class1
的转换。
我不能使用 .class2 {transition: all 1s}
因为过渡持续时间必须不同。
我也不想将代码从 class1
复制到 class2
因为 class2
也可以应用于其他元素。
有没有办法在不覆盖现有元素的情况下向元素添加过渡?
最佳答案
不幸的是,不可能在 CSS 的另一个规则中“扩展”属性,无论它是 transition
还是其他属性。
一些替代方案可能是:
为类的组合创建规则
.class1.class2 {transition:background-color 0.4s, top 1s;}
缺点是您必须为每个相关组合创建这样的规则。这也意味着代码重复。
更改 html 以消除组合规则的需要
找到一种正确的方式来表示 html 对象,这样您就不需要扩展规则。在我的例子中是:
<div class="class2">
<div class="class1">
</div>
缺点是html有点复杂。另一方面,您可以避免重复代码,并使您的 css 更具可重用性。
关于css - 将过渡添加到不同的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23612740/