AngularJS动画 - 秒客网

1.AngularJS提供了动画效果，可以配合CSS使用；

2.AngularJS使用动画需要引入angular-animate.min.js库

还需要在应用中使用模型ngAnimate:<body ng-app="ngAnimate">

3.动画是通过改变HTML元素产生的动态变化效果；

隐藏DIV：<input type="checkbox" ng-model="myCheck">

</body>

4.如果我们应用已经设置了应用名，可以把ngAnimate直接添加在模型中：

<h1>隐藏DIV：<input type="checkbox" ng-model="myCheck"></h1>

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>元素中添加如下代码: &lt ...
[整理]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产品,另外,在研 ...

随机推荐

怎样绘制ZBrush中的纹理
利用ZBrush的内置插件“投影大师”和“Polypainting”纹理贴图能够快速实现纹理的绘制.本文将对这两种方法的应用流程做一个介绍. 查看跟多内容请直接前往:http://www.zbrush ...
2016年10月28日星期五 --出埃及记 Exodus 19&colon;13
2016年10月28日星期五 --出埃及记 Exodus 19:13 He shall surely be stoned or shot with arrows; not a hand is to ...
Lattice Diamond安装
1.下载:到Lattice官网 http://www.latticesemi.com/ 注册一个lattice的账号后就可以去下载Diamond,登陆后如下图,根据自己系统情况选择对应的版本,我用的是 ...
python 中调用windows系统api操作剪贴版
# -*- coding: utf-8 -*- ''' Created on 2013-11-26 @author: Chengshaoling ''' import win32clipboard a ...
Windows Phone 8初学者开发的翻译终于过半
从2013年7月19日开始,到2013年12月9日,一共花了143天时间完成了18篇Windows Phone 8初学者开发的翻译,还剩下17篇文章需要翻译,看到了完成的希望! I love Wind ...
RabbitMQ封装实战
先说下背景:上周开始给项目添加曾经没有过的消息中间件.虽然说,一路到头非常容易,直接google,万事不愁~可是生活远不仅是眼前的"苟且".首先是想使用其他项目使用过的一套对mq封 ...
Spring中关于AOP的实践之Scheme方式实现通知
(刚开始写东西,不足之处还请批评指正) 关于AOP的通知编写方式有两种,使用Schema-baesd或者使用AspectJ方式,本篇主要介绍Schema-baesd方式的代码实现. (注:代码中没有添 ...
Codeforces Round &num;534 (Div&period; 1)
A 构造题有一个44的方格每次放入一个横向12或竖向2*1的方格满了一行或一列就会消掉求方案不放最后一行这样竖行就不会消然后竖着的放前两行横着的放第三行循环放就可以啦 #includ ...
HttpServletRequest字符集问题
post中文处理 1post在spring里的设置web.xml文件  <filter> <filter-name>encodi ...
OpenACC parallel
▶ 使用 kernels 导语并行化 for 循环 ● 同一段代码,使用 kernels,parallel 和 parallel + loop 进行对比 #include <stdio.h&gt ...