在视图中延迟子动画

Question

我是AngularJS的新手，但在提出这个问题之前，我已经搜索并搜索了一个关于Angular Way如何做到这一点的答案，但已经缩短了。

我想做什么： 让视图触发[延迟]的子动画，直到视图[父级]动画后或稍微有动画输入/输出。

我目前已经使用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秒，而父级的动画持续时间为.8秒。 （您可以在style.scss文件中更改此内容）

那么，无论引入和移除视图的延迟或持续时间，我如何才能让孩子看到动画？