Page 334 - AngularJS权威教程

314 第 22 章 Angular 动画

animation: 2s animateNgIf-enter;
}
.animateNgIf.ng-leave {
-webkit-animation: 2s animateNgIf-leave;
animation: 2s animateNgIf-leave;
}
3. JavaScript动画

当用JavaScript做动画时，需要在动画的描述对象上定义enter和leave属性。

angular.module('myApp', ['ngAnimate'])
.animation('.animateNgIf', function() {
return {
enter: function(element, done) {
// 显示如何用jQuery实现动画的例子
// 注意，这需要在HTML中包含jQuery
$(element).css({
opacity: 0
});
$(element).animate({
opacity: 1
}, done);
},
leave: function(element, done) {
done();
}
}
});

22.9.6 ngClass动画

当视图中的样式类发生变化时，是可以基于行为去产生动画的。当一个CSS类变更时（比如
在ngShow和ngHide指令中）， $animate会通知和触发动画，不管是增加了新类，还是移除了旧类。

不同于使用进入动画的命名约定，我们为ngClass使用一个新的CSS约定，依次为新类加后
缀，变为[CLASSNAME]-add和[CLASSNAME]-remove。
类似于上面的进入事件，ngAnimate会在合适的时间为具体的事件添加[CLASSNAME]-add-
active和[CLASSNAME]-remove-active。

当我们在这些样式类上做动画时，动画先触发，然后最终的类在动画结束时才被添加。当一
个类被移除时，它直到动画结束之前都还在元素上。
ngClass指令触发这些事件：

动 作 事件名称
ngClass求值为真之后，类被添加之前 add
类被移除之前触发 remove

对于后面的ngClass示例，我们用这段HTML来运行：

<div ng-init="grow=false"
ng-controller="HomeController">
<button ng-click="grow=!grow">Grow</button>
<div ng-class="{grown:grow}"