ngAnimateChildren

- directive in module ngAnimate

ngAnimateChildren allows you to specify that children of this element should animate even if any of the children's parents are currently animating. By default, when an element has an active enter, leave, or move (structural) animation, child elements that also have an active structural animation are not animated.

Note that even if ngAnimteChildren is set, no child animations will run when the parent element is removed from the DOM (leave animation).

Directive Info

This directive executes at priority level 0.

Usage

as element: (This directive can be used as custom element, but be aware of IE restrictions).
```
<ng-animate-children
  ng-animate-children="string">
...
</ng-animate-children>
```

as attribute:

<ANY
  ng-animate-children="string">
...
</ANY>

Arguments

Param	Type	Details
ngAnimateChildren	string	If the value is empty, `true` or `on`, then child animations are allowed. If the value is `false`, child animations are not allowed.

Example

<div ng-controller="mainController as main">
  <label>Show container? <input type="checkbox" ng-model="main.enterElement" /></label>
  <label>Animate children? <input type="checkbox" ng-model="main.animateChildren" /></label>
  <hr>
  <div ng-animate-children="{{main.animateChildren}}">
    <div ng-if="main.enterElement" class="container">
      List of items:
      <div ng-repeat="item in [0, 1, 2, 3]" class="item">Item {{item}}</div>
    </div>
  </div>
</div>

.container.ng-enter,
.container.ng-leave {
  transition: all ease 1.5s;
}

.container.ng-enter,
.container.ng-leave-active {
  opacity: 0;
}

.container.ng-leave,
.container.ng-enter-active {
  opacity: 1;
}

.item {
  background: firebrick;
  color: #FFF;
  margin-bottom: 10px;
}

.item.ng-enter,
.item.ng-leave {
  transition: transform 1.5s ease;
}

.item.ng-enter {
  transform: translateX(50px);
}

.item.ng-enter-active {
  transform: translateX(0);
}

angular.module('ngAnimateChildren', ['ngAnimate'])
.controller('mainController', function() {
  this.animateChildren = false;
  this.enterElement = false;
});

Load online demo