angular-ui-router - ui-router中状态转换之间的淡入淡出动画

Question

我在我的 Web 应用程序中使用 ui-router。根div代码是:

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

当我从一个状态转到另一个状态时(下面屏幕截图中的/orders 到/feedbacks)，在新状态的淡入淡出动画完成之前，第一个状态不会隐藏。



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

我哪里错了？

Answer 1

我刚刚发布了一个 tutorial with a working demo展示如何使用 ngAnimate 和 CSS 执行此操作过渡。

演示中有几个过渡，这是用于在主元素上淡入新 View 的 CSS 片段:

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

.ng-enter上只有一个过渡而不是在 .ng-leave ，这会导致新 View (即进入)淡入，而旧 View (即离开)立即消失而无需过渡。