Fade animation between state transitions in 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?

Polytechnic

The FAQ has an answer to this question that worked for me. Make sure you're using ngAnimate and then check your CSS. – Pomace

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.

Wye

Answer 2

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; }

Aestival

Answer 3

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

Cuspidation

The video link is good at explaining the source of the problem, but he does not give a solution. – Throughway

agreed-- i believe the solution will vary greatly depending on the level of ui-view nesting being used. the "simple" solution for an app not nested beyond a single view container would be to include an animation with duration for ng-animate to detect and trigger those change events mentioned and for nested views to include a matching (or greater) animation duration on the main view since this element is where ng-animate begins to watch transitionend events. – Cuspidation

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.

Guttering

I tried it, but no change. I think it is not related to css animations. Maybe it is a ui-router problem. – Polytechnic