Fade animation between state transitions in ui-router - angular-ui-router

Question

I am using ui-router in my web application. Root div code is:
<div ui-view="content" class="fade-in-up"></div>
When I go from one state to another (/orders to /feedbacks in the screenshot below), the first state doesn't hide before the new state's fade animation has finished.
My css is:
#-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 wrong?

Answer 1

I've just posted a tutorial with a working demo showing how to do this using ngAnimate with CSS transitions.
There's a couple of transitions in the demo, this is the CSS snippet for fading in new views on 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's only a transition on .ng-enter and not on .ng-leave, which causes the new view (that is entering) to fade in while the old view (that is leaving) disappears instantly without a transition.

Answer 2

ui-router will fire your ui-view route change view out at the same time as the incoming view in. so what you get is the previous ui-view still visible while the next ui-view is rendered and if you're animating the view out then there will be that transition duration of overlap between the old view and the new. you should look into holding off on rendering the new ui-view until the old one is finished animating out (before animating the new one in)
i would look into the ui-router $rootScope state change events to tap into 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 have a look it this person's example http://homerjam.github.io/angular-ui-router-anim-in-out. they have created a module that hooks into the ui-view and breaks apart the change into an enter and leave where you can trigger the animate in (of new view) after the animate out (of old view) http://homerjam.github.io/angular-ui-router-anim-in-out/anim-in-out.js
this person explains what is happening with the ui-view change duplication https://youtu.be/W89DYSthCTQ?t=345

Answer 3

Try adding the class "main" to your DIV so 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 could use the .ng-enter and .ng-leave classes (If you've included the 'ng-animate' module) to trigger the animations. Then you can do something like this in your CSS file:
[ui-view].ng-leave {
animation: fadeOut 0.5s;
}
[ui-view].ng-enter {
animation: fadeIn 0.5s;
}
or just set a transition property with a duration on the transform and opacity properties and just set them accordingly in the ng-enter and ng-leave classes.