Animation fading between state transitions in ui-router

Question

I am using ui-router in my web application. Root div code:

<div ui-view="content" class="fade-in-up"></div> 

When I switch from one state to another (/ orders for / reviews in the screenshot below), the first state is not hidden until the animation of the new state is completed.

My css:

  @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(15px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(15px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(15px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(15px); } 100% { opacity: 1; transform: translateY(0); } } .fade-in-up { -webkit-animation: fadeInUp .5s; animation: fadeInUp .5s; } 

Where am I mistaken?

Answer 1

I just posted a tutorial with a working demo showing how to do this using ngAnimate with CSS transitions.

There are a couple of transitions in the demo, this is a CSS fragment for fading in new representations of the main element:

 /* start 'enter' transition on main view */ main.ng-enter { /* transition on enter for .5s */ transition: .5s; /* start with opacity 0 (invisible) */ opacity: 0; } /* end 'enter' transition on main view */ main.ng-enter-active { /* end with opacity 1 (fade in) */ opacity: 1; } 

There is only a transition to .ng-enter , and not to .ng-leave , which leads to the gradual disappearance of a new view (which is included), when the old view (which leaves) instantly disappears without a transition.

Answer 2

ui-router will run your ui-view route change ui-view at the same time as the inbound view. Thus, you get the previous ui-view , which is still displayed while the next ui-view is displayed, and if you're reviving the view, then there will be such a transition time between the old view and the new one. you should think about rendering the new ui-view until the old one finishes the animation (before reviving the new one)

I looked at ui-router $rootScope state change events to use this ( https://github.com/angular-ui/ui-router/wiki#state-change-events ).

 ## Hold off on the state change, until current (previous) state has finished animating out $rootScope.$on '$stateChangeStart', (event, toState, toParams, fromState, fromParams) -> console.log "state change start", arguments $rootScope.$on '$stateChangeSuccess', (event, toState, toParams, fromState, fromParams) -> console.log "state change success", arguments 

also look at this example http://homerjam.imtqy.com/angular-ui-router-anim-in-out . they created a module that connects to ui-view and splits it into enter and leave , where you can start the animation in (new view) after exiting the animation (old view) http://homerjam.imtqy.com/angular-ui- router-anim-in-out / anim-in-out.js

this person explains what happens with duplication of changes ui-view https://youtu.be/W89DYSthCTQ?t=345

Answer 3

Try adding the "main" class to your DIV so that it looks like this:

 <div ui-view="content" class="main"></div> 

Then use this CSS:

 .main.ng-enter { transition: 0.25s; opacity: 0; } .main.ng-enter-active { opacity: 1; } .main.ng-leave { transition: 0.25s; opacity: 1; } .main.ng-leave-active { opacity: 0; } 

Answer 4

You can use the .ng-enter and .ng-leave classes (if you enabled the 'ng-animate' module) to start the animation. Then you can do something similar in your CSS file:

 [ui-view].ng-leave { animation: fadeOut 0.5s; } [ui-view].ng-enter { animation: fadeIn 0.5s; } 

or just set the transition property with duration in the transform and opacity properties and just set them in the ng-enter and ng-leave classes respectively.