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动画的更多相关文章

  1. AngularJS 动画总结

    对读过的几篇文章的总结,尽量保证逻辑性,不断补充.精简.更正. 后面会列出参考文章地址,方便以后取用.感谢各位作者以及翻译者. AngularJS 动画思考 一.如何使用 1)我们需要构建什么 2)如 ...

  2. AngularJS 动画

    AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...

  3. 初试angularjs动画(animate)

    angularjs不同版本的代码写法各有千秋,动画模块的写法也各有不同,以下是收集到的两大版本的写法,各位请: angularjs1.1.5版本(1.2之前) index.html代码: <!D ...

  4. AngularJS中的动画实现

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...

  5. AngularJS：动画

    ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angula ...

  6. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  7. [整理]AngularJS学习资源

    https://angular.io/docs/js/latest/(2.0官方网站) http://www.linuxidc.com/Linux/2014-05/102139.htm(Angular ...

  8. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  9. AngularJs应用页面切换优化方案（转）

    目录[-] 前言 场景 使用resolve来提前请求数据 为页面加入切换动画 总结 葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的wijmo中SpreadJS产品,另外,在研 ...

随机推荐

  1. MQTT开发笔记之《MQTT Server》

    MQTT SERVER 性能测试报告 : http://w3yyb.sinaapp.com/archives/1601各个MQTT SERVER功能列表: http://blog.lenix.xyz/ ...

  2. MySQL插入数据返回id

    按照应用需要,常常要取得刚刚插入数据库表里的记录的ID值,在MYSQL中可以使用LAST_INSERT_ID()函数,在MSSQL中使用 @@IDENTITY.挺方便的一个函数.但是,这里需要注意的是 ...

  3. python迭代器和生成器(3元运算，列表生成式，生成器表达式，生成器函数)

    1.1迭代器 什么是迭代器: 迭代器是一个可以记住遍历的位置对象 迭代器对象从集合的第一个元素元素开始访问,直到所有元素被访问完结束,迭代器只能往前不会后退. 迭代器有两个基本方法:iter ,nex ...

  4. 好用的开源web系统总结

    1.论坛 phpwind 一个用wind框架写的论坛       discuz 社区动力 论坛   2.商城 Ecshop 商城腾讯的开源商城项目 一款B2C独立网店系统,系统是基于PHP语言及MYS ...

  5. python 模块基础介绍

    从逻辑上组织代码,将一些有联系,完成特定功能相关的代码组织在一起,这些自我包含并且有组织的代码片段就是模块,将其他模块中属性附加到你的模块的操作叫做导入. 那些一个或多个.py文件组成的代码集合就称为 ...

  6. SearchLookUpEdit

    参考资料: 慧都控件网-DevExpress开发资源 在GridControl控件中使用SearchLookUpEdit构建数据快速输入

  7. MySQL数据库索引的设计原则

    为了使索引的使用效率更高,在创建索引时,必须考虑在哪些字段上创建索引和创建什么类型的索引. 1.选择唯一性索引 唯一性索引的值是唯一的,可以更快速的通过该索引来确定某条记录.例如,学生表中学号是具有唯 ...

  8. 在浏览器上直接输入url 时，中文传参乱码问题

    这样的地址 xxx.asp?name=中国  ,通过 超链接打开这个链接 ,xxx.asp能够成才接收参数,但是如果将地址直接放到浏览器地址栏上,回车, xxx.asp就无法正确接收中文参数,一直显示 ...

  9. Java 中的内存泄露

    1.当你完成对流的读写时,应该通过调同close方法来关闭它,这个调用会释放掉十分有限的系统资源,否则,如果一个应用程序打开了过多的流而没有关闭,那么系统资源将被耗尽.

  10. am335x watchdog 设备出错

    问题描述: am335x watchdog 设备节点打开失败. 如果是直接将omap_wdt 直接编译成uImage,这样会出现打开文件节点失败的情况. 如果单独编译成模块在后面文件系统内插入则不会. ...