AngularJS Animate - 过渡到不同的背景颜色只有一种方法
AngularJS Animate - Transition To Different Background Color Only Works One Way
我使用以下 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;
}
以上仅适用于一种方式 - 当您从绿色过渡到红色时。
这是什么原因造成的?
您只需要 #availability-button.red
和 #availability-button.green
。动画生命周期 类 如 red-add
和 red-remove
在您使用动画时很有用,但对于过渡可能很棘手,因为您只是在过渡 变化 在选择器之间的属性中。
在这种情况下,似乎在 red-*
和 green-*
组中匹配了多个选择器,这会导致转换完成方式出现未定义的行为。
我使用以下 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;
}
以上仅适用于一种方式 - 当您从绿色过渡到红色时。
这是什么原因造成的?
您只需要 #availability-button.red
和 #availability-button.green
。动画生命周期 类 如 red-add
和 red-remove
在您使用动画时很有用,但对于过渡可能很棘手,因为您只是在过渡 变化 在选择器之间的属性中。
在这种情况下,似乎在 red-*
和 green-*
组中匹配了多个选择器,这会导致转换完成方式出现未定义的行为。