如何在保留先前声明的转换的同时添加CSS转换

Question

假设我们得到了一个具有转换的元素。如何为另一个转换属性添加一个具有转换的类，而不覆盖并禁用其他转换？

示例

HTML:

<div class="foo bar">
  Lorem ipsum dolor sit amet …
</div>

CSS：

.foo {
  transition: background-color 1s ease-in-out;
}
.bar {
  transition: box-shadow 0.5s linear;
  /* This of course overwrites .foo */
}

Answer 1

基本上，你不能。您必须编写一个新的选择器.foo.bar，同时声明两个转换。–

.foo {
  transition: background-color 1s ease-in-out;
}
.bar {
  transition: box-shadow 0.5s linear;
}
.foo.bar {
  transition: background-color 1s ease-in-out, box-shadow 0.5s linear;
}

Answer 2

就像处理任何其他CSS属性一样，重新声明。

.foo {
  transition: background-color 1s ease-in-out;
}
.bar {
  transition: background-color 1s ease-in-out, box-shadow 0.5s linear;
}