Задержка дочерних анимаций в представлении

Question

Я новичок в AngularJS, но прежде чем задать этот вопрос, я искал и искал ответ о том, как сделать это по Angular Way, но потерпел неудачу.

Что я хочу сделать:иметь дочернюю анимацию триггера представления [задержка] до тех пор, пока представление [родитель] не будет анимировано или слегка анимировано.

В настоящее время у меня все настроено с помощью ui-view, и у меня есть анимация страниц без проблем. Но если я пытаюсь задержать дочернюю анимацию или сделать ее анимацию длиннее, чем родительская анимация, она просто прыгает вместо анимации.

Из того, что я могу сказать, это происходит потому, что ng-enter и ng-left удаляются после того, как родительский объект выполнит анимацию, как и было задумано.

Я создал 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)

Итак, как бы мне было сделать так, чтобы дети анимировали представления, независимо от того, была ли задержка или продолжительность, когда представление вводится и удаляется?