标签：
野兽的ng api学习 -- $animate
$animate
$animate服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素，以及添加和删除类。这个服务是ngAnimate的核心服务，为CSS和Javascript提供了高档次的动画。
$animate在Angular核心都是有效的，无论如何，这个服务为了支持所有动画须包含ngAnimate模块。否则，$animate只能做简单的DOM操作。
方法：
enter(element,parent,after,[done]);
在DOM中，将一个元素插入到元素后面或作为第一个子元素插入父元素，。一旦完成，done()将会被回调（如果done()存在）。
element：被插入到DOM的元素。
parent：将会被插入子元素的父元素。（如果下一个元素不存在）。
after：后面插入元素的兄弟元素。
done：当元素被插入DOM后执行的回调函数。
leave(element,[done]);
从DOM中移除元素。一旦完成，done()将会被调用（如果done()存在）。
element：将会被从DOM中移除的元素。
done：当元素被从DOM删除后执行的回调函数。
move(element,parent,after,[done]);
将提供的元素在DOM中移动位置，在父元素的内部或者兄弟元素之间。一旦完成，该done()将会被回调（如果done()存在）
element：在DOM中被移动的元素。
parent：将会被插入子元素的父元素。（如果下一个元素不存在）。
after：后面被放置元素的兄弟元素。
done：当元素在DOM中被移动后执行的回调函数。
addClass(element,className,[done]);
给提供的元素添加提供的CSS类名。一旦完成，done()将会被调用（如果done()存在）。
element：将会被添加class名称的元素。
className：将会被提供的css类。
done：当css类被添加到元素中后执行的回调函数。
removeClass(element,className,[done]);
给提供的元素移除提供的CSS类名。一旦完成，done()将会被调用（如果done()存在）。
element：将会被移除class名称的元素。
className：将会被移除的css类。
done：当css类被从元素中移除后执行的回调函数。
setClass(element,add,remove,[done]);
在元素中添加或者移除给定的css类名。一旦完成，done()将会被调用（如果done()存在）。
element：被设置CSS类的元素。
add：将会被添加到元素的CSS类。
remove：将会从元素上移除的CSS类。
done：当元素中的css类被设置后执行的回调函数。
实现animate动画代码1：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>$animate</title>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="angular.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<style type="text/css" media="screen">
.fade { width: 100px;
height: 100px;
background-color: #ff9933;
transition: 1s linear all;
-webkit-transition: 1s linear all; }
.fade.ng-enter { opacity: 0; }
.fade.ng-enter.ng-enter-active { opacity: 1; }
.fade.ng-leave { opacity: 1; }
.fade.ng-leave.ng-leave-active { opacity: 0; }
</style>
</head>
<body ng-app="Demo" ng-controller="demoCtrl">
<button my-dir>Fade in/out</button>
<script type="text/javascript">
var app = angular.module(‘Demo‘, ["ngAnimate"])
.directive("myDir", ["$animate", "$compile", function ($animate, $compile) {
function link(scope, element, attr) {
var isAppended = false;
var parent = element.parent();
var box;
element.on(‘click‘, function () {
isAppended = !isAppended;
if (isAppended) {
box = angular.element(‘<div class="fade"></div>‘);
scope.$apply($animate.enter(box, parent, element, function () {
console.log("Done entering");
}));
} else {
scope.$apply($animate.leave(box, function () {
console.log("Done leaving");
}));
}
});
}
return {
link: link
};
}])
.controller(‘demoCtrl‘,["$scope", function ($scope) {
}])
</script>
</body>
</html>
实现animate动画代码2：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>animate</title>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="angular.js"></script>
<script src="angular-animate/angular-animate.js"></script>
<style type="text/css" media="screen">
.fade { transition: 1s linear all; -webkit-transition: 1s linear all; }
.fade.ng-enter { opacity: 0; }
.fade.ng-enter.ng-enter-active { opacity: 1; }
.fade.ng-leave { opacity: 1; }
.fade.ng-leave.ng-leave-active { opacity: 0; }
</style>
</head>
<body ng-app="Demo" ng-controller="demoCtrl">
<div>
<h1>Test List</h1>
<ul>
<li ng-repeat="item in items" class="fade">{{item.value}}
<a href="javascript:void(0);" ng-click="removeItem($index)">close</a>
</li>
</ul>
<br />
<input type="text" ng-model="item.value" />
<button ng-click="addItem()">Add Item</button>
</div>
<script type="text/javascript">
var app = angular.module(‘Demo‘, ["ngAnimate"])
.controller(‘demoCtrl‘, ["$scope", function ($scope) {
$scope.items = [
{ value: "AAAAA" },
{ value: "BBBBB" },
{ value: "CCCCC" },
{ value: "DDDDD" },
{ value: "EEEEE" }
];
$scope.addItem = function () {
$scope.items.push($scope.item);
$scope.item = {};
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};
}])
</script>
</body>
</html>
实现animate动画代码3：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>animate</title>
<script src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script>
<script src="angular.js"></script>
<script src="angular-animate/angular-animate.js"></script>
</head>
<body ng-app="Demo" ng-controller="demoCtrl">
<div>
<h1>Test List</h1>
<ul>
<li ng-repeat="item in items" class="fade">{{item.value}}
<a href="javascript:void(0);" ng-click="removeItem($index)">remove</a>
</li>
</ul>
<br />
<input type="text" ng-model="item.value" />
<button ng-click="addItem()">Add item</button>
<br />
<button ng-click="bottomToTop()">我要上头条！！！</button>
</div>
<script type="text/javascript">
var app = angular.module(‘Demo‘, ["ngAnimate"])
.animation(‘.fade‘, function () {
return {
enter: function (element, done) {
element.css(‘display‘, ‘none‘);
$(element).fadeIn(1000, function () {
done();
});
},
leave: function (element, done) {
$(element).fadeOut(1000, function () {
done();
});
},
move: function (element, done) {
element.css(‘display‘, ‘none‘);
$(element).slideDown(500, function () {
done();
});
}
}
})
.controller(‘demoCtrl‘, ["$scope", function ($scope) {
$scope.items = [
{ value: "AAAAA" },
{ value: "BBBBB" },
{ value: "CCCCC" },
{ value: "DDDDD" },
{ value: "EEEEE" }
];
$scope.addItem = function () {
$scope.items.push($scope.item);
$scope.item = {};
};
$scope.removeItem = function (index) {
$scope.items.splice(index, 1);
};
$scope.bottomToTop = function () {
$scope.items.unshift($scope.items.pop());
};
}])
</script>
</body>
</html>
关于ngAnimate动画，在google找了好多资料，主要是因为$animate的方法的使用。仅仅是css3的animate使用和.animation()使用，这个不难，资料也多，以前也写过这些效果... 但是$animate的method使用没找到多少资料，然后在google找了好久，搜的是$animate关键字，好几次没找到。准备自己测试着写，在controller写出来发现不能绑定到哪个DOM元素去使用，然后想到应该可能是在directive使用的，于是找指令中的$animate使用资料，终于找到了一些用法。哈哈哈...这里就只用$animate.enter和$animate.leave做示范好了，其他的方法都是类似使用...
终于弄明白了$animate，洗洗睡去
野兽的Angular Api 学习、翻译及理解 - - $animate
标签：
原文地址：http://www.cnblogs.com/ys-ys/p/4987022.html
