AngularJS 动画
AngularJS 提供了动画效果，可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
还需在应用中使用模型 ngAnimate：
<body ng-app="ngAnimate">
示例：勾选复选框隐藏 DIV
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
width: 100%;
position: relative;
top: 0;
left: 0;
} .ng-hide {
height: 0;
width: 0;
background-color: transparent;
top:-200px;
left: 200px;
} </style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate"> <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> </body>
</html>
如果我们应用已经设置了应用名，可以把 ngAnimate 直接添加在模型中：
<body ng-app="myApp"> <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div> <script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
ngAnimate做了什么呢？
ngAnimate 模型可以添加或移除 class 。
ngAnimate 模型并不能使 HTML 元素产生动画，但是 ngAnimate 会监测事件，类似隐藏显示 HTML 元素 ，如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。
AngularJS 添加/移除 class 的指令:
ng-showng-hideng-classng-viewng-includeng-repeatng-ifng-switch
ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。
其他指令会在进入 DOM 会添加 ng-enter 类，移除 DOM 会添加 ng-leave 属性。
当 HTML 元素位置改变时，ng-repeat 指令同样可以添加 ng-move 类 。
此外， 在动画完成后，HTML 元素的类集合将被移除。例如： ng-hide 指令会添加一下类：
ng-animateng-hide-animateng-hide-add(如果元素将被隐藏)ng-hide-remove(如果元素将显示)ng-hide-add-active(如果元素将隐藏)ng-hide-remove-active(如果元素将显示)
我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果。如：
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
}
.ng-hide {
height: 0;
}
</style>
CSS 动画允许你平滑的修改 CSS 属性值:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
AngularJS 动画的更多相关文章
- AngularJS 动画总结
对读过的几篇文章的总结,尽量保证逻辑性,不断补充.精简.更正. 后面会列出参考文章地址,方便以后取用.感谢各位作者以及翻译者. AngularJS 动画思考 一.如何使用 1)我们需要构建什么 2)如 ...
- AngularJS动画
1.AngularJS提供了动画效果,可以配合CSS使用: 2.AngularJS使用动画需要引入angular-animate.min.js库 <script src="http:/ ...
- 初试angularjs动画(animate)
angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...
- AngularJS中的动画实现
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...
- AngularJS：动画
ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angula ...
- AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
- [整理]AngularJS学习资源
https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- AngularJs应用页面切换优化方案（转）
目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...
随机推荐
- RocketMQ原理解析－Producer
producer producer 1.启动流程 Producer如何感知要发送消息的broker即brokerAddrTable中的值是怎么获得的, 1. 发送消息的时候指定会指定topic,如果 ...
- Windows bat脚本学习（1）
基础 首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 ...
- MQTT开发笔记之《安全传输-自问自答》
Mosquito使用SSL/TLS进行安全通信时的使用方法:http://www.it165.net/pro/html/201404/12615.htmljava版mosquitto客户端使用SSL功 ...
- C#中POST数据和接收的几种方式（抛砖引玉）
POST方式提交数据,一种众所周知的方式: html页面中使用form表单提交,接收方式,使用Request.Form[""]或Request.QueryString[" ...
- 出现 cannot be resolved or is not a field 错误
删除R.Java文件,这时,系统会重新生成一个R.java; 删除java代码中的"import Android.R"文件. 重新导入正确的包.
- php-fpm优化方法详解
php-fpm优化方法 php-fpm存在两种方式,一种是直接开启指定数量的php-fpm进程,不再增加或者减少:另一种则是开始时开启一定数量的php-fpm进程,当请求量变大时,动态的增加php-f ...
- javascript 获取滚动条高度+常用js页面宽度与高度
/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; ...
- Matplotlib——第一章轻松画个图
首先安装matplotlib,使用pip install matplotlib.安装完成后在python的命令行敲入import matplotlib,如果没问题,说明安装成功可以开始画图了. 看好了 ...
- 多个文件下载打包生成zip格式下载
这个多个文件下载生成zip格式必须先引用一个ICSharpCode.SharpZipLib.dll. 代码如下 //将多个文件打包成压缩文件zip格式下载 protected voi ...
- 解决svn问题：Wrong committed revision number: -1
参考:http://my.oschina.net/luckyi/blog/291007