Page 324 - AngularJS权威教程

304 第 22 章 Angular 动画

则表达式对元素进行过滤，以去掉不匹配元素上的动画操作。

myModule.config(function($animateProvider) {
// 唯一合法的参数是正则表达式
$animateProvider.classNameFilter(/\banimate-/);
});

现在有了给定的正则表达式，/animated/，只有以animate开始的CSS类会被为动画而处理。
结果，我们的.fade-in动画不会再运行了，它需要被重命名成.animate-fade-in才能真正运行。

22.8 DOM 回调事件

当动画在一个元素产生时，我们想要检测DOM操作什么时候发生，可以在$animate服务上
注册一个事件。事件如下：

element.on('$animate:before', function(evt, animationDetails) {});
element.on('$animate:after', function(evt, animationDetails) {});

22.9 内置指令的动画

22.9.1 ngRepeat动画

ngRepeat指令产生这些事件：

动 作 事 件 名
一项被插入到列表之后 enter
一项从列表中移除 remove
列表中的一项移动了 move

对这三个例子，我们使用下面这个HTML：
<div ng-controller="HomeController">
<ul>
<li class="fade-in" ng-repeat="r in roommates">
{{ r }}
</li></ul>
</div>
我们的HomeController默认是这样定义的：

angular.module('myApp', ['ngAnimate'])
.controller('HomeController', function($scope) {
$scope.roommates = [
'Ari', 'Q', 'Sean', 'Anand'
];
setTimeout(function() {
$scope.roommates.push('Ginger');
$scope.$apply(); // 触发一次digest

setTimeout(function() {
$scope.roommates.shift();
$scope.$apply(); // 触发digest