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

假设我们有一个元素有一个过渡。如何添加具有另一个转换属性的转换的类，而不覆盖并禁用另一个转换

示例

HTML:

---

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

.foo {
  transition: background-color 1s ease-in-out;
}

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

---

基本上，你不能。您必须编写一个新的选择器.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;
}

---

我想是的。对于未来版本的CSS来说，这将是一个有用的特性，因为它将使代码更加模块化。在更复杂的场景中，

.foo

和

.bar

可能是两个完全分离的模块，但目前它们必须混合在一起。关键是我不想重新声明，而是添加一个转换，因为规范允许在

转换中有多个实例shorthand@luke请参阅SCSS或以下版本。
.foo {
  transition: background-color 1s ease-in-out;
}

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

.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;
}