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-*, что приводит к неопределенному поведению при завершении перехода.

Обновленная скрипка