Angular ui-router animating child state changes but not grandchild

Question

I have an angular app with a main abstract view and nested child views. One of the children of the main view is also abstract with child views of its own.

When I change child states of the main parent, animations work fine but when I change states of the grandchildren there are no animations.

When looking at developers tools I see that the ng-enter and ng-leave classes are added when the children states change but not when the grandchildren change.

Here is a plunker demonstrating the behavior.

Answer 1

This has to do with how your CSS rules are written, you're grabbing ui-view with an attribute selector for .ng-enter and ng-leave, but declaring the ui view directive both as an element and as an attribute in your html. so you should do something more like this:

ui-view.ng-enter, [ui-view].ng-enter { // animation }

Here is a working fork of your plunkr