Page 336 - AngularJS权威教程

316 第 22 章 Angular 动画

3. JavaScript动画
当用JavaScript做动画时，需要在动画的描述对象上定义addClass和removeClass属性。

angular.module('myApp', ['ngAnimate'])
.animation('.animateMe', function() {
return {
addClass: function(ele, clsName, done)
{
// 显示如何用jQuery实现动画的例子
// 注意， 这需要在HTML中包含jQuery
if (clsName === 'grown') {
$(ele).animate({
'font-size': '50px'
}, 2000, done);
} else { done(); }
},
removeClass: function(ele, clsName, done)
{
if (clsName === 'grown') {
$(ele).animate({
'font-size': '16'
}, 2000, done);
} else { done(); }
}
}
});

22.9.7 ngShow/ngHide动画

ngShow和ngHide指令在显示或者隐藏元素时，使用了.ng-hide类。可以在显示和隐藏DOM
元素之间的这段时间添加动画。

当在这些样式类上做动画时，动画会先触发，它完成时，最终的.ng-hide才会被加到DOM
元素上。

因为当移除ng-hide类时，ng-hide指令还在DOM元素上，所以在它完成之前，我们是看不
到动画的。因此，需要告诉CSS把我们的样式类显示出来，不要折叠。

ngShow和ngHide指令触发这些事件：
动 作 事件名称
ngClass求值为真之后，类被添加之前 add
类被移除之后 remove

对后面的ngHide例子，我们使用下面这个HTML来运行：

<div ng-init="show=false"
ng-controller="HomeController">
<button ng-click="show=!show">Show</button>
<div ng-show="show" class="animateMe">
<h2>Show me</h2>
</div>
</div>