在ui-router中的状态转换之间淡化动画

Question

我在我的网络应用程序中使用ui-router.根div代码是:

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

当我从一个状态转到另一个状态(/命令到/下面的屏幕截图中的反馈)时,第一个状态在新状态的淡入淡出动画结束之前不会隐藏.

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

我刚刚发布了一个教程,其中包含一个工作演示,演示如何使用ngAnimate和CSS过渡来完成此操作.

演示中有几个转换,这是用于淡化主要元素的新视图的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,这会导致新视图(即进入)淡入,而旧视图(即离开)在没有转换的情况下立即消失.

Answer 2

尝试将"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.他们已经创建了一个模块,该模块可以挂钩ui-view并将更改拆分为一个模块,enter并且leave可以在动画输出(旧视图)后触发(新视图)中的动画http://homerjam.github.io/angular- UI路由器-动画- -输出/动画功能于out.js

这个人解释了ui-view更改重复所发生的事情https://youtu.be/W89DYSthCTQ?t=345