AngularJS Animate-过渡到不同背景颜色仅一种方法

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很有用，但是对于过渡来说可能很棘手，因为您只是在属性中过渡 change 选择器之间。

在这种情况下，red-*和green-*组中似乎有多个选择器匹配，这导致过渡完成方式出现不确定的行为。

Updated Fiddle