html - 如何将两个具有过渡属性的 CSS 类添加到一个 HTML 元素？

Question

我有两个不同的类，我将它们附加到不同配置中的各种 html 元素，以实现不同的过渡选项。例如。只有 color 过渡，只有 border 过渡，或者 color 和 border 过渡。当我为一个具有 transition 属性的 html 元素添加两个类时，只有一个 transition 属性有效。

在下面的示例中，按钮 B 中的 color 过渡不起作用。我知道我可以为每个元素单独创建 transition: color .1s, border .1s 等，但是使用类方法它会少很多代码。

button {
  display:block;
  border:solid 3px #33aaff;
  background-color:white;
  color:#33aaff;
  margin:5px;
  font-size:22px;
  cursor:pointer;
}

.anim-color{
  color:#33aaff;
  transition:color .2s ease-in-out;
}

.anim-color:hover{
  color:#ff55aa;
}

.anim-border{
  border:solid 3px #33aaff;
  transition:border .2s .1s ease-in-out;
}

.anim-border:hover{
  border:solid 3px #ff55aa;
}

<button class="anim-color">button A</button>
<button class="anim-color anim-border">button B</button>

Answer 1

如果您两次设置 CSS 属性，那么一个值将覆盖另一个。它永远不会以附加方式处理。

您需要一次应用所有值。

您可以一直这样做:

button {
    transition: color .1s, border .1s
}

或仅当类合并时:

.anim-color.anim-border {
    transition: color .1s, border .1s
}