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() {this.items = [
           { value: "AAAAA" },
           { value: "BBBBB" },
           { value: "CCCCC" },
           { value: "DDDDD" },
           { value: "EEEEE" }
        ];this.addItem = function () {this.items.push(this.item);this.item = {};
        };this.removeItem = function (index) {this.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() {this.items = [
           { value: "AAAAA" },
           { value: "BBBBB" },
           { value: "CCCCC" },
           { value: "DDDDD" },
           { value: "EEEEE" }
        ];this.addItem = function () {this.items.push(this.item);this.item = {};
        };this.removeItem = function (index) {this.items.splice(index, 1);
        };this.bottomToTop = function () {this.items.unshift(this.items.pop());
        };
     }
  }());</script></body></html>

更多效果,可在google搜"$animate",百度资料太少了额,质量也不行...

转载于:https://my.oschina.net/yeshou/blog/615037

//获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //画函数 obj---要执行画的对象 json---要执行到的目标的参数对象 fn为执行完成后的回调函数(可以再次调用此方法按照上面格式传参--顺序执行多个画) //调用例: //zIndex:1000 //透明度opacity: 数字类型----小数---放大100倍 // my$("btn1").onclick = function () { // var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; // animate(my$("dv"), json1, function () { //var json2={"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000} // animate(my$("dv"),json2,function(){按照此格式多次重复添加画将会顺序执行} ); // }); // }; function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移步数:" + step); }, 20); }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值