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?

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.