angular学习（十七）——-Animations
简介Angular为一些常用的指令（ngRepeat,ngSwitch,ngView）提供了动画的hooks，自动的指令也可以通过 一定要在app中注入ngAnimate模块，动画才能起作用。下面是一个可以用于ngShow和ngHide的例子。 <!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> .content-area { border: 1px solid black; margin-top: 10px; padding: 10px; } .sample-show-hide { transition: all linear 0.5s; } .sample-show-hide.ng-hide { opacity: 0; } </style>
</head>
<body ng-controller="ainmationController">
<div ng-init="checked = true">
<label>
<input type="checkbox" ng-model="checked"/>
Is visible
</label>
<div class="content-area sample-show-hide" ng-show="checked">
Content...
</div>
</div>
</body>
<script> var myanimation = angular.module("myanimate",['ngAnimate']); myanimation.controller("ainmationController",function () { }); </script>
</html>
工作原理angularjs的动画是完全基于css的，只要你将相应的css应用到html元素中，你就可以使用动画。下面，我们来看一个repeater的例子。 <!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> /* 为元素的新增和顺序改变用css的transition方式增加动画效果 */ .repeated-item.ng-enter,.repeated-item.ng-move { transition: all 0.5s linear; opacity: 0; } /* 上面transition方式动画的目标效果 */ .repeated-item.ng-enter.ng-enter-active,.repeated-item.ng-move.ng-move-active { opacity: 1; } /* 为元素的移除使用css3的keyframe方式增加动画效果 */ .repeated-item.ng-leave { animation: 0.5s my_animation; } @keyframes my_animation { from { opacity: 1; } to { opacity: 0; } } </style>
</head>
<body ng-controller="ainmationController as ctrl">
<div ng-repeat="item in items" class="repeated-item">
{{ item.id }}
</div>
<button ng-click="ctrl.add()">add</button>
<button ng-click="ctrl.remove()">remove</button>
<button ng-click="ctrl.reverse()">reverse</button>
</body>
<script> var myanimation = angular.module("myanimate",['$scope',function ($scope) { $scope.items = []; $scope.items.push({"id": "1001"}); $scope.items.push({"id": "1002"}); $scope.items.push({"id": "1003"}); this.add = function () { $scope.items.push({"id": "1004"}); } this.remove = function () { $scope.items.pop(); } this.reverse = function () { $scope.items.reverse(); } }]); </script>
</html>
每个ng-repeat重复的元素节点都会带有repeated-item的样式，它将告诉每个元素如何演示动画效果。在这里要说明一下：每增加一个元素，这个元素就增加一个ng-enter的css;如果元素顺序发生改变，就会增加一个ng-remove的css;移除一个元素，就会增加一个ng-leave的CSS。这些css会在动画完成后消失。 为了更好的理解，来看一下用jquey实现同样的效果： myModule.animation('.repeated-item',function() {
return {
enter: function(element,done) {
// 初始化元素的opacity
element.css('opacity',0);
// 用opacity方式实现动画
element.animate({opacity: 1},done);
// 当取消事件产生后，停止动画
return function(isCancelled) {
if (isCancelled) {
element.stop();
}
};
},leave: function(element,done) {
element.css('opacity',1);
element.animate({opacity: 0},done);
return function(isCancelled) {
if (isCancelled) {
element.stop();
}
};
},// 其他事件的动画也是一样的实现方式
move: function(element,done) {},addClass: function(element,className,removeClass: function(element,done) {}
}
});
元素上的css决定了angularjs什么时候执行动画，同一个css上如果想css动画和javascript动画一起使用的话需要使用 Class和ngClass的动画hookangularjs也为css的class更改附加了动画hook，也就是说当css的class的值添加或者移除时就会相应的产生动画效果，但要注意的一点是仅仅ng-class的相应的插值发生改变时才会触发这个动画。 <!DOCTYPE html>
<html lang="en" ng-app="myanimate">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<style> .css-class-add,.css-class-remove { transition: all 0.5s cubic-bezier(0.250,0.460,0.450,0.940); } .css-class { color: red; font-size: 3em; } </style>
</head>
<body ng-controller="ainmationController as ctrl">
<p>
<button ng-click="myCssVar='css-class'">Set</button>
<button ng-click="myCssVar=''">Clear</button>
<br>
<span ng-class="myCssVar">CSS-Animated Text</span>
</p>
</body>
<script> var myanimation = angular.module("myanimate",function ($scope) { }]); </script>
</html>
支持动画的指令一些常用的指令在他们生命周期的几个主要事件上可以触发动画，下面列表详细的给出了各个指令可以支持的动画：
自定义指令中使用动画自定义的指令可以通过注入 myModule.directive('my-directive',['$animate',function($animate) {
return function(scope,element) {
element.on('click',function() {
if (element.hasClass('clicked')) {
$animate.removeClass(element,'clicked');
} else {
$animate.addClass(element,'clicked');
}
});
};
}]);
app引导启动和页面加载时的动画你可能注意到了，我们之前ng-repeat的例子中，前三个数据是一下就出现的并没有动画，这是因为默认的app启动时的动画是禁止的，这是为了防止在页面有大量的动画时，可能会引起视觉上的混乱，对加载速度也有一定的影响。 在angularjs的内部，ngAnimate要等待app启动的引导完成，再等待模板的下载，还要等当前 如果你一定要在app引导启动时产生动画效果，那么你需要在module的run方法中激活anmitate即可，但要注意这个激活是全局的。 myModule.run(function($animate) {
$animate.enabled(true);
});
怎么样选择性的启动，禁用或者跳过动画有多种不同的方法来全局禁用动画或者禁用特定的动画。禁用特定的动画可以提升渲染的性能，比如一些很大的ngRepeat列表实际上是没有动画的。即使元素没有一个动画，ngAnimate都在运行时会去检查有没有动画要演示，这是会影响性能的。 在config中，使用
|