How can I use ng-animate with ui-view rather than ng-view?
Solution 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);
}
Solution 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.
Solution 3
Over the weekend, I created two plunks demonstrating view animations for both ui-view
and ng-view
ui-view
: http://plnkr.co/edit/jpebBk?p=preview
ng-view
: http://plnkr.co/edit/LQhVYU?p=preview
angular-ui-router 0.2.8 came with fixes to major view animation bugs
Solution 4
I just posted a tutorial with a working demo for using ngAnimate (1.4.8) with UI Router.
It shows a couple of different view animations, a fade in transition on the main view and a slide in/out transition on a nested view.
Here's a snippet from the LESS file for the fade in transition on the main view:
main {
/* start 'enter' transition */
&.ng-enter {
/* transition on enter for .5s */
transition: .5s;
/* start with opacity 0 (invisible) */
opacity: 0;
}
/* end 'enter' transition */
&.ng-enter-active {
/* end with opacity 1 (fade in) */
opacity: 1;
}
}
Solution 5
Avoid the view
name for named-views
or id
for that element.
For example, if this is your html
<div id="home-page" ui-view="home">
<!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>
Instead of:
/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
/*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Try:
div[ui-view].ng-enter {
/*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Good Luck.
Per Quested Aronsson
SOreadytohelp Javascript frontend mobile, CTV and video domain specialist, also familiar with server-side technologies, including Node, PHP, PostgreSQL, MySQL, AWS, etc. I have advanced skills in Javascript, SQL, data analysis, data presentation, and HTML5/CSS3.
Updated on June 28, 2020Comments
-
Per Quested Aronsson almost 4 years
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.