AngularJS ngAnimateChildren

ngAnimate

实例

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