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秒动画吗？

DEMO ：http://jsfiddle.net/bnyJ6/79/

Answer 1

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

目前，我认为模拟等待彼此动画的最简单方法是在输入动画中添加转换延迟（source）。

但这可能会变得混乱。在您的示例中，您导航到的页面在淡入之前仍然会开始占用空间并向下逐渐淡出页面。您可以将视图设置为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;
}

ng-animate不允许完成动画

1 个答案: