在应用类时动画边框？

Question

如何将更改动画到应用类时发生的边框。

例如：

el-item {
    border-left: 6px solid red;
}

 el-item.onSelected {
    border-left: 6px solid blue;
}

当将onSelected类添加到el-item元素时，边框颜色将更改为blue。我们如何推动这一转变？

Answer 1

您可以添加css。

.el-item{
    border-left: 6px solid red;
    transition: all .5s;
}

和

.el-item.onSelected{
    border-color: blue;
}

我在这里创建了一个示例：码页

Answer 2

边框属性是一个可动的属性，因此您可以只添加元素的转换属性。

.class-name {
  transition: border 1s;
}

如果要使用js添加和删除类，请确保在未删除的类中设置此属性。