AngularJs $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"，百度资料太少了额，质量也不行...
AngularJs $animate 让页面动起来的更多相关文章
- 从零开始学习jQuery (七) jQuery动画-让页面动起来!
一.摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 开发人员一直痛疼做动画. 但是有了jQuery你 ...
- 玩转HTML5移动页面(动效篇)
原文:http://www.grycheng.com/?p=458 作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有 ...
- 转：玩转HTML5移动页面(动效篇)
作为一名前端,在拿到设计稿时你有两种选择: 1.快速输出静态页面 2.加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就 ...
- 玩转HTML5移动页面(动效篇)(转载)
本文转载自: 玩转HTML5移动页面(动效篇)
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- 拒绝枯燥，有意思的 Loading 页面动效设计
互联网时代,网络“提速”日益频繁,人们打开Web或软件的速度越来越快,一般页面缓冲和加载地过程也是几不可查.然而,在某些情况下,例如软件急需加载大量页面,首页急需加载大量内容,用户下载文件过大,甚至是 ...
- HTML基础五-starrysky页面动起来
Starrysky前端框架 链接:https://pan.baidu.com/s/1P8mPrHZjyRtzw1NWnAx-9w 提取码:cjl5 接口文档:https://www.showdoc.c ...
- JQuery 实践--让页面动起来
获取和设置元素特性特性属性:是指DOM元素中能够和HTML元素中某个特性对应得上的属性.通常JS特性属性的名称与对应的特性一一匹配,但class <=>className操作特性还是操作属 ...
- html页面动效
找到了一个喜欢的黑客帝国动效"https://files.cnblogs.com/files/blogs/718959/codeMatrix-master.zip?t=1643081202& ...
随机推荐
- centos6-honeyd安装&配置
安装 需要装 libpcap libevent libdnet 等(!) 有些用的yum,有些下载的安装包手动安装 (wget tar configure make install 非常linux) ...
- 整合Apache与PHP教程
Apache下载安装完成后,PHP下载解压后,最重要的是如何将他们连接起来,就是整合到一起,让它们之间有联系,笔者根据自己多次配的经验和帮学弟学妹配时他们的理解程度整理了一个比较详细易理解的版本,下面 ...
- 在CentOS上部署基于dnx/coreclr的ASP.NET 5应用程序
在Ubuntu上写好了一个简单的ASP.NET 5应用程序,尝试将这个程序部署在没有mono环境的CentOS服务器上. 部署步骤如下: 1)安装libuv(KestrelHttpServer需要它) ...
- GWT-Dev-Plugin（即google web toolkit developer plugin）for Chrome的安装方法
如果你想要在Chrome中进行GWT调试,需要安装“gwt developer plugin for chrome”,但是普通安装模式下,会提示: This application is not su ...
- 基于FPGA的音频信号的FIR滤波（Matlab+Modelsim验证）
1 设计内容 本设计是基于FPGA的音频信号FIR低通滤波,根据要求,采用Matlab对WAV音频文件进行读取和添加噪声信号.FFT分析.FIR滤波处理,并分析滤波的效果.通过Matlab的分析验证滤 ...
- SVN 修改log信息报错的解决方案
要实现允许修改log这个功能,只需要在hooks目录下增加一个名为:pre-revprop-change.bat的文件,重启svn即可.该文件内容为:------------------------- ...
- C++ new失败的处理
我们都知道,使用 malloc/calloc 等分配内存的函数时,一定要检查其返回值是否为“空指针”(亦即检查分配内存的操作是否成功),这是良好的编程习惯,也是编写可靠程序所必需的.但是,如果你简单地 ...
- Beta项目冲刺 --第二天
在几kb的上传速度中苦苦挣扎的程序员... 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照 ...
- Servlet从本地文件中读取图片，并显示在页面中
import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpSer ...
- 如何知道某个网站的IP地址
命令行窗口得到ip地址 1按键盘上的win键(alt键左面的小窗口)+R键 调用运行 2输入cmd 确定 调用系统的 命令行窗口 3在命令行窗口里输入 ping + 空格键 + www.*****.c ...