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

Question

我在我的网络应用程序中使用 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

您可以使用 .ng-enter 和 .ng-leave 类（如果您包含 'ng-animate' 模块）来触发动画。然后你可以在你的 CSS 文件中做这样的事情：

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

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

或者只是在变换和不透明度属性上设置一个带有持续时间的过渡属性，然后在 ng-enter 和 ng-leave 类中相应地设置它们。

Answer 2

尝试将 class "main" 添加到您的 DIV 中，使其看起来像这样：

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

然后使用这个 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 3

ui-router 将在进入视图的同时触发您的 ui-view 路线更改视图。所以您得到的是前一个 ui-view 仍然可见，而下一个 ui-view 被渲染，如果你正在动画视图，那么旧视图和新视图之间会有重叠的过渡持续时间。你应该考虑推迟渲染新的 ui-view 直到旧的动画完成（在动画新的之前）

我会调查 ui-router $rootScope 状态更改事件以利用此 (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

也看看这个人的例子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

此人解释了 ui-view 更改重复的情况 https://youtu.be/W89DYSthCTQ?t=345

Answer 4

我刚刚发布了一个 tutorial with a working demo 展示如何使用带有 CSS 过渡的 ngAnimate 来做到这一点。

演示中有几个转换，这是 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 上的过渡，这会导致新视图（正在进入）淡入，而旧视图（正在离开）立即消失，无需过渡。

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

Fade animation between state transitions in ui-router

ng-animate

angular-ui-router