AngularJS动画-转换到不同的背景颜色只有一种方法

Question

我使用以下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;
}

以上只适用于一种方式-当你从绿色过渡到红色时。

是什么原因造成的？

Fiddle

Answer 1

您只需要#availability-button.red和#availability-button.green。如果使用动画，像red-add和red-remove这样的动画生命周期类很有用，但对于转换来说可能很棘手，因为您只是在选择器之间转换属性中的更改。

在这种情况下，red-*和green-*组中似乎匹配了多个选择器，这导致了如何完成转换的未定义行为。

更新的Fiddle