Improve this Doc View Source

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 `ngAnimateChildren` 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:

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

## Examples

    <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 MainController() {
      this.animateChildren = false;
      this.enterElement = false;
    });