$animate
$animate服务提供了基本的DOM操作功能如在DOM里插入、移除和移动元素&＃xff0c;以及添加和删除类。这个服务是ngAnimate的核心服务&＃xff0c;为CSS和Javascript提供了高档次的动画。
$animate在Angular核心都是有效的&＃xff0c;无论如何&＃xff0c;这个服务为了支持所有动画须包含ngAnimate模块。否则&＃xff0c;$animate只能做简单的DOM操作。
方法&＃xff1a;
enter(element,parent,after,[done]);
在DOM中&＃xff0c;将一个元素插入到元素后面或作为第一个子元素插入父元素。一旦完成&＃xff0c;done()将会被回调&＃xff08;如果done()存在&＃xff09;。
element&＃xff1a;被插入到DOM的元素。
parent&＃xff1a;将会被插入子元素的父元素。&＃xff08;如果下一个元素不存在&＃xff09;。
after&＃xff1a;后面插入元素的兄弟元素。
done&＃xff1a;当元素被插入DOM后执行的回调函数。
leave(element,[done]);
从DOM中移除元素。一旦完成&＃xff0c;done()将会被调用&＃xff08;如果done()存在&＃xff09;。
element&＃xff1a;将会被从DOM中移除的元素。
done&＃xff1a;当元素被从DOM删除后执行的回调函数。
move(element,parent,after,[done]);
将提供的元素在DOM中移动位置&＃xff0c;在父元素的内部或者兄弟元素之间。一旦完成&＃xff0c;该done()将会被回调&＃xff08;如果done()存在&＃xff09;
element&＃xff1a;在DOM中被移动的元素。
parent&＃xff1a;将会被插入子元素的父元素。&＃xff08;如果下一个元素不存在&＃xff09;。
after&＃xff1a;后面被放置元素的兄弟元素。
done&＃xff1a;当元素在DOM中被移动后执行的回调函数。
addClass(element,className,[done]);
给提供的元素添加提供的CSS类名。一旦完成&＃xff0c;done()将会被调用&＃xff08;如果done()存在&＃xff09;。
element&＃xff1a;将会被添加class名称的元素。
className&＃xff1a;将会被提供的css类。
done&＃xff1a;当css类被添加到元素中后执行的回调函数。
removeClass(element,className,[done]);
给提供的元素移除提供的CSS类名。一旦完成&＃xff0c;done()将会被调用&＃xff08;如果done()存在&＃xff09;。
element&＃xff1a;将会被移除class名称的元素。
className&＃xff1a;将会被移除的css类。
done&＃xff1a;当css类被从元素中移除后执行的回调函数。
setClass(element,add,remove,[done]);
在元素中添加或者移除给定的css类名。一旦完成&＃xff0c;done()将会被调用&＃xff08;如果done()存在&＃xff09;。
element&＃xff1a;被设置CSS类的元素。
add&＃xff1a;将会被添加到元素的CSS类。
remove&＃xff1a;将会从元素上移除的CSS类。
done&＃xff1a;当元素中的css类被设置后执行的回调函数。
实现animate动画代码1&＃xff1a;
DOCTYPE html>
<html> <head> <meta charset&＃61;"utf-8" /> <title>$animatetitle> <script src&＃61;"http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js">script> <script src&＃61;"../angular-1.4.7/angular.js">script> <script src&＃61;"../angular-1.4.7/angular-animate.js">script> <style type&＃61;"text/css" media&＃61;"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&＃61;"Demo" ng-controller&＃61;"testCtrl as ctrl"> <button my-dir>Fade in/outbutton> <script type&＃61;"text/Javascript"> (function(){ var app &＃61; angular.module(&＃39;Demo&＃39;, ["ngAnimate"]) .directive("myDir", ["$animate", "$compile", myDir]) .controller(&＃39;testCtrl&＃39;,angular.noop); function myDir($animate, $compile) { function link(scope, element, attr) { var isAppended &＃61; false; var parent &＃61; element.parent(); var box; element.on(&＃39;click&＃39;, function () { isAppended &＃61; !isAppended; if (isAppended) { box &＃61; angular.element(&＃39;&＃39;); 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 }; } }());
实现animate动画代码2&＃xff1a;
DOCTYPE html>
<html> <head> <meta charset&＃61;"utf-8" /> <title>$animatetitle> <script src&＃61;"http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js">script> <script src&＃61;"../angular-1.4.7/angular.js">script> <script src&＃61;"../angular-1.4.7/angular-animate.js">script> <style type&＃61;"text/css" media&＃61;"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&＃61;"Demo" ng-controller&＃61;"testCtrl as ctrl"> <div> <h1>Test Listh1> <ul> <li ng-repeat&＃61;"item in ctrl.items" class&＃61;"fade">{{item.value}} <a href&＃61;"Javascript:void(0);" ng-click&＃61;"ctrl.removeItem($index)">closea> li> ul> <br /> <input type&＃61;"text" ng-model&＃61;"ctrl.item.value" /> <button ng-click&＃61;"ctrl.addItem()">Add Itembutton> div> <script type&＃61;"text/Javascript"> (function(){ var app &＃61; angular.module(&＃39;Demo&＃39;, ["ngAnimate"]) .controller(&＃39;testCtrl&＃39;,testCtrl); function testCtrl() { var vm &＃61; this; vm.items &＃61; [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem &＃61; function () { vm.items.push(vm.item); vm.item &＃61; {}; }; vm.removeItem &＃61; function (index) { vm.items.splice(index, 1); }; } }());
实现animate动画代码3&＃xff1a;
DOCTYPE html>
<html> <head> <meta charset&＃61;"utf-8" /> <title>$animatetitle> <script src&＃61;"http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js">script> <script src&＃61;"../angular-1.4.7/angular.js">script> <script src&＃61;"../angular-1.4.7/angular-animate.js">script> head> <body ng-app&＃61;"Demo" ng-controller&＃61;"testCtrl as ctrl"> <div> <h1>Test Listh1> <ul> <li ng-repeat&＃61;"item in ctrl.items" class&＃61;"fade">{{item.value}} <a href&＃61;"Javascript:void(0);" ng-click&＃61;"ctrl.removeItem($index)">removea> li> ul> <br /> <input type&＃61;"text" ng-model&＃61;"ctrl.item.value" /> <button ng-click&＃61;"ctrl.addItem()">Add itembutton> <br /> <button ng-click&＃61;"ctrl.bottomToTop()">我要上头条&＃xff01;&＃xff01;&＃xff01;button> div> <script type&＃61;"text/Javascript"> (function(){ var app &＃61; angular.module(&＃39;Demo&＃39;, ["ngAnimate"]) .animation(&＃39;.fade&＃39;, fade) .controller(&＃39;testCtrl&＃39;,testCtrl); function fade() { return { enter: function (element, done) { element.css(&＃39;display&＃39;, &＃39;none&＃39;); $(element).fadeIn(1000, function () { done(); }); }, leave: function (element, done) { $(element).fadeOut(1000, function () { done(); }); }, move: function (element, done) { element.css(&＃39;display&＃39;, &＃39;none&＃39;); $(element).slideDown(500, function () { done(); }); } } } function testCtrl() { var vm &＃61; this; vm.items &＃61; [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem &＃61; function () { vm.items.push(vm.item); vm.item &＃61; {}; }; vm.removeItem &＃61; function (index) { vm.items.splice(index, 1); }; vm.bottomToTop &＃61; function () { vm.items.unshift(vm.items.pop()); }; } }());
关于ngAnimate动画&＃xff0c;在google找了好多资料&＃xff0c;主要是因为$animate的方法的使用。仅仅是css3的animate使用 和.animation()使用&＃xff0c;这个不难&＃xff0c;资料也多&＃xff0c;以前也写过这些效果... 但是$animate的method使用没找到多少资料&＃xff0c;然后在google找了好久&＃xff0c;搜的是$animate关键字&＃xff0c;好几次没找到。准备自己测试着 写&＃xff0c;在controller写出来发现不能绑定到哪个DOM元素去使用&＃xff0c;然后想到应该可能是在directive使用的&＃xff0c;于是找指令中的$animate 使用资料&＃xff0c;终于找到了一些用法。哈哈哈...这里就只用$animate.enter和$animate.leave做示范好了&＃xff0c;其他的方法都是类似使 用...
京公网安备 11010802041100号