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) rather than ng-view (which would be the standard way)? See Remastered Animation in AngularJS 1.2 for reference on ng-view.

EDIT: I have tried two different versions of angular: v1.2.0-rc.2 and v1.2.0-rc.3 as suggested in the comments, but neither seems to do the trick. I guess I might be doing something wrong?

Here is the HTML:

<div ui-view class="slide"></div> 

and the CSS:

.slide {     width:1024px;     height:768px; } .slide.ng-enter, .slide.ng-leave {     -webkit-transition:0.5s linear all;     -moz-transition:0.5s linear all;     -o-transition:0.5s linear all;     transition:0.5s linear all;     border: 1px solid blue; }  .slide.ng-enter.ng-enter-active {     border: 1px solid red; } 

I added a JSfiddle of the previously mentioned example. It would be nice to expand this example to cover ng-view and ui-view, but I'm not sure how to get ng/ui-view and the partials into JSfiddle, though.

Answer 1

The bug is now closed and they've added an entry over at the ui-router Wiki. It also includes a demo Plunkr. I will copy the code example here, just in case the URL would become outdated.

HTML:

<div class="row">    <div class="span12 ui-view-container">       <div class="well" ui-view></div>            </div> </div>  

CSS:

/* Have to set height explicity on ui-view  to prevent collapsing during animation*/ .well[ui-view]{  height: 65px;  }  .ui-view-container {   position: relative; }  [ui-view].ng-enter, [ui-view].ng-leave {   position: absolute;   left: 0;   right: 0;   -webkit-transition:all .5s ease-in-out;     -moz-transition:all .5s ease-in-out;     -o-transition:all .5s ease-in-out;     transition:all .5s ease-in-out; }  [ui-view].ng-enter {   opacity: 0;   -webkit-transform:scale3d(0.5, 0.5, 0.5);   -moz-transform:scale3d(0.5, 0.5, 0.5);   transform:scale3d(0.5, 0.5, 0.5); }  [ui-view].ng-enter-active {   opacity: 1;   -webkit-transform:scale3d(1, 1, 1);   -moz-transform:scale3d(1, 1, 1);   transform:scale3d(1, 1, 1); }  [ui-view].ng-leave {   opacity: 1;    -webkit-transform:translate3d(0, 0, 0);   -moz-transform:translate3d(0, 0, 0);   transform:translate3d(0, 0, 0); }  [ui-view].ng-leave-active {   opacity: 0;   -webkit-transform:translate3d(100px, 0, 0);   -moz-transform:translate3d(100px, 0, 0);   transform:translate3d(100px, 0, 0); } 

Answer 2

Looks like this is fixed with UI Router 0.2.8. I'm using AngularJS v1.2.7.

For an example, just add the "slide" class to your ui-view

<div ui-view class="slide"> 

And use the following css for your animation.

.slide {     -webkit-transition: -webkit-transform .7s ease-in-out;     -moz-transition: -moz-transform .7s ease-in-out;     -o-transition: -o-transform .7s ease-in-out;     transition: transform .7s ease-in-out;     -webkit-transform: translateX(0);     transform: translateX(0); }  .slide.ng-enter {     -webkit-transform: translateX(-100%);     transform: translateX(-100%); }  .slide.ng-enter.ng-enter-active, .slide.ng-leave {     position: absolute;     -webkit-transform: translateX(0);     transform: translateX(0); }  .slide.ng-leave.ng-leave-active {     -webkit-transform: translateX(100%);     transform: translateX(100%); } 

Additionally, some animations seemed to have some weird behavior because of $uiViewScroll. I worked around it by adding autoscroll="false" to my ui-view element.