Angular - - $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="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/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="testCtrl as ctrl"> <button my-dir>Fade in/out</button> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .directive("myDir", ["$animate", "$compile", myDir]) .controller('testCtrl',angular.noop); function myDir($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 }; } }()); </script> </body> </html>

实现animate动画代码2：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>$animate</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/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="testCtrl as ctrl"> <div> <h1>Test List</h1> <ul> <li ng-repeat="item in ctrl.items" class="fade">{{item.value}} <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">close</a> </li> </ul> <br /> <input type="text" ng-model="ctrl.item.value" /> <button ng-click="ctrl.addItem()">Add Item</button> </div> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .controller('testCtrl',testCtrl); function testCtrl() { var vm = this; vm.items = [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem = function () { vm.items.push(vm.item); vm.item = {}; }; vm.removeItem = function (index) { vm.items.splice(index, 1); }; } }()); </script> </body> </html>

实现animate动画代码3：

<!DOCTYPE html>
<html> <head> <meta charset="utf-8" /> <title>$animate</title> <script src="http://cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.js"></script> <script src="../angular-1.4.7/angular.js"></script> <script src="../angular-1.4.7/angular-animate.js"></script> </head> <body ng-app="Demo" ng-controller="testCtrl as ctrl"> <div> <h1>Test List</h1> <ul> <li ng-repeat="item in ctrl.items" class="fade">{{item.value}} <a href="javascript:void(0);" ng-click="ctrl.removeItem($index)">remove</a> </li> </ul> <br /> <input type="text" ng-model="ctrl.item.value" /> <button ng-click="ctrl.addItem()">Add item</button> <br /> <button ng-click="ctrl.bottomToTop()">我要上头条！！！</button> </div> <script type="text/javascript"> (function(){ var app = angular.module('Demo', ["ngAnimate"]) .animation('.fade', fade) .controller('testCtrl',testCtrl); function fade() { 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(); }); } } } function testCtrl() { var vm = this; vm.items = [ { value: "AAAAA" }, { value: "BBBBB" }, { value: "CCCCC" }, { value: "DDDDD" }, { value: "EEEEE" } ]; vm.addItem = function () { vm.items.push(vm.item); vm.item = {}; }; vm.removeItem = function (index) { vm.items.splice(index, 1); }; vm.bottomToTop = function () { vm.items.unshift(vm.items.pop()); }; } }()); </script> </body> </html>

关于ngAnimate动画，在google找了好多资料，主要是因为$animate的方法的使用。仅仅是css3的animate使用和.animation()使用，这个不难，资料也多，以前也写过这些效果... 但是$animate的method使用没找到多少资料，然后在google找了好久，搜的是$animate关键字，好几次没找到。准备自己测试着写，在controller写出来发现不能绑定到哪个DOM元素去使用，然后想到应该可能是在directive使用的，于是找指令中的$animate 使用资料，终于找到了一些用法。哈哈哈...这里就只用$animate.enter和$animate.leave做示范好了，其他的方法都是类似使用...

Angular - - $animate相关推荐

animate默认时长所带来的问题及解决
一.需求描述做一个进度条长度逐渐减少的动画,当进度条长度小于等于0时,关闭动画,并弹出透明底板显示新提示. 二.问题描述初始代码如下: //设置进度条初始长度 var progressLength ...
3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
jquery animate函数实现
jquery animate 函数实现动画效果参数一比如高度宽度之类的:'-=50' 参数二速度之类 <html xmlns="http://www.w3.org/1999/ ...
超棒的跨浏览器纯CSS动画实现 - Animate.css
为什么80%的码农都做不了架构师?>>> 日期:2012-8-12 来源:GBin1.com 在线演示本地下载通常情况下如果需要生成web动画效果的话,我们肯定会考虑使 ...
jQuery动画---自定义动画animate()
版权声明:本文为博主原创文章,转载请注明出处. https://blog.csdn.net/twilight_karl/article/details/73511662 同步动画 animate(参数 ...
jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
1.$和jquery在全局命名空间中定义的唯一两个变量. 2.jquery是工厂函数,不是构造函数.他返回一个新创建的对象. 3.jquery的四种调用方式: <1>传递CSS选择 ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
html 动画div右侧消失,使用animate.css时，动画一开始不隐藏,如何解决呢？
animate.css 的入场动画,一开始(初始态)怎么隐藏呢?(否则会闪一下.) 动画结束后要保持显示. 补充.. 使用了官网推荐的jquery 扩展代码,运动完后自动删除 class. 这是一个坑 ...
JQuery笔记(二)jq常用方法animate()
在jq中,比较方便的是相对于js,jq封装了很多方法,很方便使用,下面我举几个常用的方法 animate()方法 1 <!DOCTYPE html> 2 <html lang=&qu ...
vue过渡和animate.css结合使用
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...

Angular - - $animate

Angular - - $animate相关推荐

最新文章

热门文章