Question

说我有一个<div></div>

我在样式表文件中（sass）

div
  transition: border-color linear 1s

当然可以正常使用

然后我想在他们的height中得到一些div transition-property，取决于类，所以我得到了一些<div class='changeheight'></div>，并且在样式表文件中：

div.changeheight
  transition: height linear 1s

然后，只有第二个转换规则有效，第一个转换规则突然被替换，或者说，在chrome dev工具中得到删除。

那么如何让这两条规则协同工作呢？

Answer 1

如果要转换两个属性，则必须将它们放在逗号分隔列表中，否则最后一条规则将覆盖以前的规则。

我建议为不同的转换使用特定的类，例如.bordered和.changeheight，然后您可以将转换组合起来，如下所示：

.bordered {
  transition: border-color linear 1s;
}

.changeheight {
  transition: height linear 1s;
}

.bordered.changeheight {
  transition: border-color linear 1s, height linear 1s;
}

或者，您可以transition: all linear 1s;让所有可动画的属性顺利过渡。

如何APPEND，NOT REPLACE转换值？

1 个答案: