You need to define the transition on the element's class itself, not on the class you are adding/animating.
That way $animate
will look at the class and realise it has a transition applied, and animate accordingly. Otherwise it doesn't bother adding/removing classes as it would all happen at the same time.
See my fork
CSS Classes used:
.classname {
// The class of the element you want to animate
// Its default state (invisible).
}
.classname.visible-class-add {
// Any preparatory work you need to do before animating
// This is the ideal place to put your transition property.
}
.classname.visible-class-add-active{
// during-animation class (often none needed)
}
.classname.visible-class-remove {
// Pre- remove class: possibly the same as .visible-class-add
}
.classname.visible-class-remove-active {
// any during-animation style (often none required)
}
.classname.visible-class {
// The visible state.
}