How can I use ng-animate with ui-view rather than ng-view?

Question

I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions.
How can I use ng-animate with ui-view (from angular-ui-router) rath

Answer 1

In case anyone wanted to use animate.css with Angular and UI-Router, one could simply do this below. Note this was only tested using Angular 1.2.21 and UI-Router 0.2.10.

Example of using FadeInDown as enter animation and FadeOutDown as exit animation. Simply swap the animation name for any animation from animate.css. You may also want to put this in a div container with the position set to relative.

HTML:

CSS:

.fade.ng-enter, .fade.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.fade.ng-enter {
   -webkit-animation-name: fadeInDown;
   animation-name: fadeInDown;
}

.fade.ng-leave {
   -webkit-animation-name: fadeOutDown;
   animation-name: fadeOutDown;
}

Another example instead using bounceInDown and bounceOutDown:

HTML:

CSS:

.bounce.ng-enter, .bounce.ng-leave {
    position: absolute;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.bounce.ng-enter {
   -webkit-animation-name: bounceInDown;
   animation-name: bounceInDown;
}

.bounce.ng-leave {
   -webkit-animation-name: bounceOutDown;
   animation-name: bounceOutDown;
}

EDIT: Made a fork of @kamweti's Plunker to visualize example with animate.css.