Javascript 延迟视图中的子动画

我是AngularJS的新手，但在问这个问题之前，我一直在寻找一个答案，关于如何用AngularJS的方式来做这件事，但结果很短

我想做的是： 让视图的子动画触发[delay]，直到视图[parent]设置了动画或稍微设置了动画输入/输出

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

据我所知，这是因为ng enter和ng LEVEL在父对象按设计完成动画制作后被删除

我创建了一个Plunker来展示：

动画是通过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%);
    }
}

如果在页面之间单击，您将看到黄色框没有动画，因为它有1s的延迟，而父对象的动画持续时间为.8s。（您可以在style.scss文件中对此进行更改）

---

那么，我该如何让孩子们制作一个视图动画，无论视图被引入和移除时的延迟或持续时间是多少？

你能不能不使用动画延迟：1s@JonSamwell-动画延迟用于关键帧。我尝试过关键帧动画和过渡，两者都有相同的问题。