1

我已将动画设置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;
    }
}

我不能让 angular-animate 先完成 1 秒的动画吗？

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

4

1 回答 1

5

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

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

但这可能会变得混乱。在您的示例中，您正在导航到的页面在淡入之前仍会开始占用空间并撞倒正在淡出的页面。您可以通过将视图设置为来解决此问题position: absolute;。

没有演示：http transition-delay: //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;
}
于 2013-10-26T06:28:55.867 回答