css - 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 在您使用动画时很有用，但对于过渡来说可能很棘手，因为您只是过渡更改选择器之间的属性。

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

Updated Fiddle