AngularJS Animate - Transition To Different Background Color Only Works One Way

Question

I use the following CSS to animate the change in background color for a 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;
}

The above works only one way - when you transition from green to red.

What is causing this?

Fiddle

Austin Brunkhorst · Accepted Answer · 2018-11-12T09:05:32.543

You only need #availability-button.red and #availability-button.green. The animation life-cycle classes like red-add and red-remove are useful if you're using animations, but for transitions can be tricky since you're just transitioning the change in properties between selectors.

In this case, it seems like multiple selectors are matched in the red-* and green-* groups, which causes undefined behavior in how the transition is completed.

Updated Fiddle

AngularJS Animate - Transition To Different Background Color Only Works One Way

1 Answers1