0

我是 AngularJS 的新手，但在问这个问题之前，我已经搜索并搜索了有关如何以 Angular 方式执行此操作的答案，但结果不足。

我想要做什么： 让视图触发[延迟]的子动画直到视图[父]动画进入或略微动画进入/退出之后。

我目前已经用 ui-view 设置了所有内容，并且页面动画进出没有任何问题。但是，如果我尝试延迟子动画或使其动画长于父动画的持续时间，那么它只会跳转而不是动画。

据我所知，这是因为 ng-enter 和 ng-leave 在父级完成动画后被删除，正如设计的那样。

我创建了一个 Plunker 来展示这个：http ://plnkr.co/edit/5iOb1j0l8lFaMZfrKIFh?p=preview

动画是通过 CSS 完成的：

.ui-animate {
    $enLvDur: .8s;
    $delay: 1s;

    &.ng-enter,
    &.ng-leave {
        position:absolute;
        top: 100px; right: 0;
        bottom: 0; left: 0;

        transform: -webkit-translateX(0px);
        transform: -ms-translateX(0px);
        transform: translateX(0px);
    }

    &.ng-enter {
        z-index: 2;
        transform: -webkit-translateX(100%);
        transform: -ms-translateX(100%);
        transform: translateX(100%);

        transition: -webkit-transform $enLvDur ease-in-out 0s;
        transition:     -ms-transform $enLvDur ease-in-out 0s;
        transition:         transform $enLvDur ease-in-out 0s;

        .child-delay {
            opacity: 0;

            transition: opacity $enLvDur ease-in-out $delay;
        }
    }

    &.ng-enter-active {
        transform: -webkit-translateX(0px);
        transform: -ms-translateX(0px);
        transform: translateX(0px);

        .child-delay {
            opacity: 1;
        }
    }

    &.ng-leave {
        z-index: 1;
        transform: -webkit-translateX(0px);
        transform: -ms-translateX(0px);
        transform: translateX(0px);

        transition: -webkit-transform $enLvDur ease-in-out 0s;
        transition:     -ms-transform $enLvDur ease-in-out 0s;
        transition:         transform $enLvDur ease-in-out 0s;
    }

    &.ng-leave-active {
        transform: -webkit-translateX(100%);
        transform: -ms-translateX(100%);
        transform: translateX(100%);
    }
}

如果您在页面之间单击，您会看到黄色框没有动画，因为它有 1 秒的延迟，而父级有 0.8 秒的动画持续时间。（您可以在 style.scss 文件中更改它）

那么，无论视图被引入和移除时的延迟或持续时间，我将如何让视图子动画化？

4

0 回答 0