Невозможно пошатнуть дочерние анимации ngAnimate

Question

Я пытаюсь создать анимацию для дочернего элемента div ngRepeat со следующим HTML.

<strong>This staggers</strong> 
    <div ng-repeat="item in items" class="animate-stagger container" ng-animate-children="true"> 
    <div>{{item}}</div> 
    </div> 

    <strong>This doesn't stagger</strong> 
    <div ng-repeat="item in items" class="animate-child-stagger container" ng-animate-children="true"> 
    <div>{{item}}</div> 
    </div> 

Я могу успешно шатаются анимации для ngRepeat Div с помощью CSS:

.animate-stagger{ 
    animation-duration: 2s; 
} 

.animate-stagger.ng-enter-active { 
    animation-name: slide; 
    transform: scaleX(0); 
} 

.animate-stagger.ng-enter-stagger { 
    animation-delay: 1s; 
    animation-duration: 0s; 
} 

Я могу оживить ребенка DIV, однако он не шататься с помощью CSS:

.animate-child-stagger { 
    animation-duration: 2s; 
} 

.animate-child-stagger.ng-enter-active div { 
    animation: slide 2s; 
    transform: scaleX(0); 
} 

.animate-child-stagger.ng-enter-stagger div { 
    animation-delay: 1s; 
    animation-duration: 0s; 
} 

Есть ли способ, которым я могу пошатнуть дочерние анимации с помощью CSS и ngAnimate?

Пример plunker:http://plnkr.co/edit/08TviNqVUTkGCnLNDKdp?p=preview

Answer 1

я смог сделать эту работу путем применения задержки анимации к родительскому элементу (даже если это ребенок, который анимация).

.animate-stagger-child { 
    animation-duration: 2s; 
} 

.animate-stagger-child.ng-enter-active div { 
    animation: slide 2s; 
    transform: scaleX(0); 
} 

.animate-stagger-child.ng-enter-stagger { 
    animation-delay: 1s; 
    animation-duration: 0s; 
}