ngAnimate removeClass not working properly

Question

I have been working with the ngAnimate module for AngularJS 1.2.14

When I use $animate.addClass it works correctly adding the ng-animate, -add, -add-active

However when I use $animate.removeClass it seems to just run the equivalent of elem.removeClass. None of the animation classes are applied on the remove (such as ng-animate, -remove, -remove-active)

Here is the plnkr replicating the issue.

http://plnkr.co/edit/DIQSthOFxooVDSqO2KKQ?p=preview

I can code the remove methods manually but I would prefer to use the Animate directive.

Answer 1

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.
}