如何在单独的CSS类中保持单独的转换，避免相互覆盖

Question

我有一个CSS类可以处理旋转动画：

.rotation {
transition-property: transform;
transition-duration: 0.4s;
transition-delay: 0s;
}

第二类处理线性动画：

.linear {
transition-property: left, bottom;
transition-duration: 0.8s;
transition-delay: 0s;
}

当然，问题是，虽然我打算将这些转换规则应用于不同的属性——在一种情况下是transform，在另一种情况中是left, bottom——但当两者都应用于一个元素时，它们实际上是相互覆盖的，因此最后应用的是赢得transition-property值的那个，而被覆盖的属性没有应用转换。

有没有任何方法可以通过这种方式应用单独的转换类？

Answer 1

为具有两个类的元素定义一个新规则：

.linear.rotation {
transition-property: transform, left, bottom;
transition-duration: 0.4s, 0.8s, 0.8s;
transition-delay: 0, 0, 0;
}

确保此规则位于.linear和.rotation的任何现有规则之后。

顺便说一句，设置top/right/bottom/left属性的动画并不是最好的性能——理想情况下只使用transform，因为它可以避免昂贵的重新布局。您可以使用translate/translateX/translateY来实现(视觉上(相同的效果。

Answer 2

如果属性的数量有限，您可以依赖如下CSS变量：

/* main class to be added to all the elements*/
.transition {
transition-property: left, bottom, transform, opacity, height;
transition-duration: var(--l-dur, 0s), var(--b-dur, 0s), var(--t-dur, 0s), var(--o-dur, 0s), var(--h-dur, 0s);
transition-delay: var(--l-del, 0s), var(--b-del, 0s), var(--t-del, 0s), var(--o-del, 0s), var(--h-del, 0s);
}
/**/
.rotation {
--t-dur: 0.4s;
}
.linear {
--l-dur: 0.8s;
--b-dur: 0.8s;
}
.grow {
--h-dur: 1s;
}
.show {
--o-dur: 0.5s;
--o-del: 0.8s;
}

Answer 3

一个结合了所有所需内容的简写类如下：

.linear-rotation {
transition: left 0.8s, bottom 0.8s, transform 0.4s;
}