Can't stagger ngAnimate child animations

Question

I am trying to stagger animation for a child element of an ngRepeat div with the following 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>

I can successfully stagger animation for the ngRepeat div using 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;
}

I can animate the child div, however it does not stagger using 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;
}

Is there a way I can stagger child animations using CSS and ngAnimate?

Example plunker: http://plnkr.co/edit/08TviNqVUTkGCnLNDKdp?p=preview

Answer 1

I was able to make this work by applying the animation delay to the parent element (even though it is the child that is animating).

.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;
}