在UI路由器中状态转换之间淡入淡出动画

Question

我在我的web应用程序中使用UI路由器。根格代码：

<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

我刚刚发布了一个tutorial with a working demo显示如何使用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

您可以使用.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 3

尝试添加类“主力”你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 4

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-router-anim-in-out/anim-in-out.js

这个人说明了什么正在发生ui-view更改复制https://youtu.be/W89DYSthCTQ?t=345