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. git 代码更新

    第一:先说首次使用 意思就是这个文件夹中的代码你还没有向GITHUB提交过代码 cd /home/test(假如 test就是你的用户名)/githubtest(这是个文件夹,你可以提前先建立好,这个 ...

  2. 框架集（Framesets）

    1.Frameset的使用 所谓框架便是网页画面分成几个框窗,同时取得多个 URL.只 要 <FRAMESET> <FRAME> 即可,而所有框架标记 要放在一个总起的 htm ...

  3. Java数组及其内存分配

    几乎所有的程序设计语言都支持数组.Java也不例外.当我们需要多个类型相同的变量的时候,就考虑定义一个数组.在Java中,数组变量是引用类型的变量,同时因为Java是典型的静态语言,因此它的数组也是静 ...

  4. python3随记——字符编码

    1.1什么是字节 字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符. 比特(bit)在计算机中最小的单位,在二进制位的电脑的系统中,每一b ...

  5. 搭建FTP服务器

    yum install vsftpd -yyum install pam* db4* --skip-broken –y 创建并生成vsftpd 数据库文件vi /etc/vsftpd/ftpusers ...

  6. 忍不住记录下小型的CMDB系统

  7. Mac Sublime Text complie python .py error /bin/bash: shell_session_update: command not found

    1.get the rvm version rvm -v 2.make sure the version at least 1.26 above. 3.then go ahead rvm get he ...

  8. c++11 中成员变量初始化的顺序

    参考C++11FAQ https://www.chenlq.net/cpp11-faq-chs 11以后可以直接在类里面初始化成员变量,类似这样 class A { int a=1; const in ...

  9. PHP5不重新编译，如何安装自带的未安装过的扩展，如soap扩展？

    在虚拟机的CentOS5.5中,一键安装了PHP运行环境,但发现并没有 soap 扩展,而近期项目用需要用到 webservice. 上述的一键安装(lamp0.4),其实是源码编译安装,PHP配置文 ...

  10. Linux启动过程详解（inittab、rc.sysinit、rcX.d、rc.local）

    启动第一步--加载BIOS 当你打开计算机电源,计算机会首先加载BIOS信息,BIOS信息是如此的重要,以至于计算机必须在最开始就找到它.这是因为BIOS中包含了CPU的相关信息.设备启动顺序信息.硬 ...