如何在添加类时实现边框的动画过渡效果？

你只需要在基础的el-item样式中添加transition属性，指定border-left-color属性的过渡规则，就能实现平滑的颜色切换效果。

修改后的CSS代码如下：

el-item {
    border-left: 6px solid red;
    /* 针对border-left-color属性设置过渡：时长0.3秒，使用ease缓动曲线 */
    transition: border-left-color 0.3s ease;
}

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

关键说明： #

• transition属性的作用是告诉浏览器：当指定的CSS属性发生变化时，以动画形式过渡到新值，而非瞬间切换。
• 这里精准指定过渡属性为border-left-color，你也可以用border-color覆盖所有边框颜色变化，但精准指定能避免不必要的性能消耗。
• 0.3s是过渡时长（可按需调整，比如改为0.5s），ease是缓动函数（默认慢-快-慢的节奏，也可选用linear实现匀速过渡）。
• 由于你的示例中边框宽度和样式（6px solid）在两种状态下未发生变化，仅需针对颜色属性做过渡即可。如果后续需要同时过渡宽度或样式，只需把对应属性加入transition列表，比如transition: border-left-color 0.3s ease, border-left-width 0.3s ease;

内容的提问来源于stack exchange，提问作者Ole