Css 有没有一种方法可以将多个；“过渡”；规则？

我想要CSS轻量级类，每个类都有一个含义。 所以我想要有一个类，它说当鼠标在上面时，一个项目会变得更高，另一个类说，如果父项不活动，那么该项目会变得不可见。 问题是每个方面都应该设置动画，所以我在第一节课中定义了

transition:height 1s

，在另一节课中定义了

transition:opacity 2s

以下是我尝试的简化版本。 这似乎做了一些完全不同于我预期的事情：规则不合并，而只是相互覆盖

。仅活动\u{
不透明度：0；
过渡：不透明度1s；
}
.activator:悬停。仅活动\u{
不透明度：1；
}
.弹性{
高度：20px；
过渡：高度1s；
}
.弹性：悬停{
高度：40px；
}
李{
边框：1px纯红；
}

这是一个神奇的列表

第一项
第二项

您可以使用

all

使所有正在更改的属性具有转换，也可以使用逗号分隔的值（如果您只希望选定（但多个）属性具有转换）

.active_only {
    opacity: 0;
    -webkit-transition: height 1s, opacity 1s;
    -moz-transition: height 1s, opacity 1s;
    transition: height 1s, opacity 1s;
}

或

。仅活动\u{
不透明度：0；
-webkit转换：高度1s，不透明度1s；
-moz过渡：高度1s，不透明度1s；
过渡：高度1s，不透明度1s；
}
.activator:悬停。仅活动\u{
不透明度：1；
}
.弹性{
高度：20px；
}
.弹性：悬停{
高度：40px；
}
李{
边框：1px纯红；
}

这是一个神奇的列表

第一项
第二项

在相同的元素上声明转换。因此，即使使用不同的类来声明它们，转换属性也会被第二个转换声明覆盖

如果使用以下语法（）仅声明一次转换，则可以转换高度和不透明度：

您的CSS可能如下所示：

.active_only {
    opacity:0;
    transition: opacity 1s, height 1s;
}
.activator:hover .active_only {
    opacity:1;
}
.elastic {
    height:20px;
}
.elastic:hover {
    height:40px;
}
li {
    border:1px solid red;
}

---

用户

转换：所有1

您同时找到解决方案了吗？

transition: opacity 1s, height 1s;

.active_only {
    opacity:0;
    transition: opacity 1s, height 1s;
}
.activator:hover .active_only {
    opacity:1;
}
.elastic {
    height:20px;
}
.elastic:hover {
    height:40px;
}
li {
    border:1px solid red;
}