当前位置:AngularJS API / ngAnimate / 指令(Directive) / ngAnimateChildren
ngAnimateChildren
<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; });