Delaying child animations in a view

Question

I'm new to AngularJS but before asking this question i've searched and searched for an answer on how to do this the Angular Way but have come up short.

What i'm looking to do: Have child animations of a view trigger [delay] until after the view[parent] has animated in or has slightly animated in/out.

I currently have everything set up with ui-view and have the pages animating in and out without any problems. But, if I try to delay a child animation or have its animation longer than the duration of the parent animation then it just jumps instead of animating.

From what I can tell, this is because ng-enter and ng-leave get removed after the parent is done animating, as designed.

I have created a Plunker to show this: http://plnkr.co/edit/5iOb1j0l8lFaMZfrKIFh?p=preview

The animations are being done via 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%);
    }
}

If you click between the pages you'll see the yellow box doesn't animate because it has a 1s delay on it while the parent has a .8s animation duration. (you can change this in the style.scss file)

So, how would I go about having a views children animate, no matter the delay or duration when a view is brought in and removed?