Css AngularJS动画-转换到不同的背景色仅以一种方式工作

我使用以下CSS为

div

设置背景颜色变化的动画：

#availability-button.red-add, #availability-button.red-remove, #availability-button.green-add, #availability-button.green-remove{
    transition: background-color 2000ms linear;
}
#availability-button.red, #availability-button.red-add, #availability-button.red-add-active{
    background-color: #c21807;
}
#availability-button.green, #availability-button.green-add, #availability-button.green-add-active{
    background-color: #68af28;
}

当您从绿色过渡到红色时，上述方法仅起一种作用

这是什么原因造成的

您只需要

#可用性按钮。红色

和

#可用性按钮。绿色

。如果使用动画，动画生命周期类（如

redadd

和

redremove

）很有用，但是对于转换来说可能很棘手，因为您只是在选择器之间转换属性的更改

在这种情况下，似乎在

红色-*

和

绿色-*

组中匹配了多个选择器，这会导致转换如何完成的行为未定义

您只需要

#可用性按钮。红色

和

#可用性按钮。绿色

。如果使用动画，动画生命周期类（如

redadd

和

redremove

）很有用，但是对于转换来说可能很棘手，因为您只是在选择器之间转换属性的更改

在这种情况下，似乎在

红色-*

和

绿色-*

组中匹配了多个选择器，这会导致转换如何完成的行为未定义

---

小提琴对我有用。小提琴对我有用。