AngularJS动画
1.AngularJS提供了动画效果，可以配合CSS使用；
2.AngularJS使用动画需要引入angular-animate.min.js库
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular-animate.min.js.min.js"></script>
还需要在应用中使用模型ngAnimate:<body ng-app="ngAnimate">
3.动画是通过改变HTML元素产生的动态变化效果；
<body ng-app="ngAnimate">
隐藏DIV：<input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck"></div>
</body>
4.如果我们应用已经设置了应用名，可以把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>
5.ngAnimate做了什么？
**ngAnimate模型可以添加或移除class；
**ngAnimate模型并不能使HTML元素产生动画，但是ngAnimate会监测事件，类似隐藏显示HTML元素，如果事件发生ngAnimate就会使用预定义的class来设置HTML元素的动画；
**AngularJS添加/移除class的指令：
(1)ng-show：添加ng-class的值
(2)ng-hide：移除ng-class的值
(3)ng-class
(4)ng-view
(5)ng-include
(6)ng-repeat：当HTML元素位置改变时，ng-repeat指令同样可以添加ng-move类
(7)ng-if
(8)ng-switch
类集合：
(9)ng-animate
(10)ng-hide-animate
(11)ng-hide-add：如果元素将被隐藏
(12)ng-hide-remove：如果元素将显示
(13)ng-hide-add-active：如果元素将隐藏
(14)ng-hide-remove-active：如果元素将显示
6.使用CSS动画：
CSS过渡：让我们平滑的将一个CSS属性值改为另一个：
<style>
div{
transition:all linear 0.5s;
background-color:lightblue;
height:100px;
}
.ng-hide{height:0;} //在DIV元素设置了.ng-hide类时，过渡需要花费0.5秒，高度从100px变为0；
</style>
7.CSS动画：CSS动画允许你平滑的修改CSS属性值
<style>
@keyframe 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 动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...
- 初试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产品,另外,在研 ...
随机推荐
- VsFtpd配置文件详解
1.默认配置:1>允许匿名用户和本地用户登陆. anonymous_enable=YES local_enable=YES2>匿名用户使用的登陆名为ftp或anonymou ...
- BZOJ1483: [HNOI2009]梦幻布丁
传送门 名字起得很高端实际上很简单的算法hhh 启发式合并 简单讲就是一些合并一堆队列的题可以用启发式合并,或者说这是一个思想.每次把小的合并到大的部分,均摊复杂度$O(MlogN)$. //BZOJ ...
- BZOJ3172: [Tjoi2013]单词
传送门 做了这么多题怎么还是无法很好的理解AC自动机呢..果然是个制杖 首先题意表述不是很清晰,这些所有的单词组成了那个文章,所以果断建个AC自动机,建的时候给每个点附加一个权值,建树是经过一次权值即 ...
- AE套宗获取内环
主要根据IPolygon4的get_InteriorRingBag方法. IGeometry geo = null; IRing exring = null; (geo as IPolygon2).Q ...
- c# 网络
http://www.cnblogs.com/fuchongjundream/p/4079128.html http://stackoverflow.com/questions/21728773/th ...
- 莫比乌斯环-vtkTriangleStrip
#ifndef INITIAL_OPENGL #define INITIAL_OPENGL #include <vtkAutoInit.h> VTK_MODULE_INIT(vtkRend ...
- 禁用PHP函数，可以对php.ini进行配置
php.ini 里有个 disable_functions 开关选项,此选项可关闭一些危险的函数,比如system,exec 等.比如: disable_functions = phpinfo , 如 ...
- 【转】4G内存下MySQL修改配置文件以优化效率（来自discuz）
摘要:公司网站访问量越来越大,MySQL自然成为瓶颈,因此最近我一直在研究 MySQL 的优化,第一步自然想到的是 MySQL 系统参数的优化,作为一个访问量很大的网站(日20万人次以上)的数据库. ...
- php.ini 安全配置
(1) 打开php的安全模式 php的安全模式是个非常重要的内嵌的安全机制,能够控制一些php中的函数,比如system(),同时把很多文件操作函数进行了权限控制,也不允许对某些关键文件的文件,比如/ ...
- Linux ftp访问控制配置,包括访问ftp权限和访问ftp目录权限
在Linux 上建立用户为website1 home目录是/data/home/website1 但是用ftp登录以后,路径可以随便切换,并且可以进入别的站点下 进行增.删.改 本篇的目的是:在lin ...