ng-animate不允许完成动画

Question

我已将动画设置ng-view为淡入1秒,但它不会让动画完成:

.fadethis {
    &.ng-enter, &.ng-leave {
        -webkit-transition: all linear 1s;
        -moz-transition: all linear 1s;
        transition: all linear 1s;
        display: block !important;
    }

    &.ng-enter, &.ng-leave.ng-leave-active {
      opacity:0;
    }

    &.ng-leave, &.ng-enter.ng-enter-active {
      opacity:1;
    }
}

我不能让角度动画首先完成1秒动画吗？

演示:http://jsfiddle.net/bnyJ6/79/

Answer 1

在您的示例中,您的视图看起来并没有实际消失.如果是这样,您导航到的页面将出现并在上一页完成淡出之前开始淡入.

目前我认为模拟等待彼此的动画的最简单方法是向输入动画(源)添加转换延迟.

这可能会变得混乱.在您的示例中,您导航到的页面在淡入之前仍然会开始占用空间并向下逐渐淡出页面.您可以通过设置视图来解决此问题position: absolute;.

演示没有transition-delay:http://jsfiddle.net/5evFx/

用transition-delay和演示position: absolute:http://jsfiddle.net/spKnX/

工作标记:

<div ng-view class="view fadein fadeout"></div>

工作CSS:

.fadein.ng-enter,
.fadeout.ng-leave {
    -webkit-transition: all linear 1s;
    -moz-transition: all linear 1s;
    -o-transition: all linear 1s;
    transition: all linear 1s;
    display: block !important;
}

.fadein.ng-enter {
    opacity: 0;
}

.fadeout.ng-leave {
    opacity: 1;
}

.fadein.ng-enter.ng-enter-active {
    transition-delay: 1s;
    opacity: 1;
}

.fadeout.ng-leave-active {
    opacity: 0;
}

html, body, .container {
    height: 100%;
}

.view {
    position: absolute;
}