AngularJS中实现动画效果的方法


Posted in Javascript onJuly 28, 2016

AngularJS 动画

AngularJS 提供了动画效果,可以配合 CSS 使用。

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

<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>

还需在应用中使用模型 ngAnimate:

<body ng-app="ngAnimate">

什么是动画?

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

实例

勾选复选框隐藏 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://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.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>

运行效果:

AngularJS中实现动画效果的方法

AngularJS中实现动画效果的方法

注意:应用中动画不宜太多,但合适的使用动画可以增加页面的丰富性,也可以更易让用户理解。

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

实例

<!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://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<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>

</body>
</html>

运行效果:

AngularJS中实现动画效果的方法

AngularJS中实现动画效果的方法

ngAnimate 做了什么?

ngAnimate 模型可以添加或移除 class 。

ngAnimate 模型并不能使 HTML 元素产生动画,但是 ngAnimate 会监测事件,类似隐藏显示 HTML 元素 ,如果事件发生 ngAnimate 就会使用预定义的 class 来设置 HTML 元素的动画。

AngularJS 添加/移除 class 的指令:

ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch

ng-show 和 ng-hide 指令用于添加或移除 ng-hide class 的值。

其他指令会在进入 DOM 会添加 ng-enter 类,移除 DOM 会添加 ng-leave 属性。

当 HTML 元素位置改变时,ng-repeat 指令同样可以添加 ng-move 类 。

此外, 在动画完成后,HTML 元素的类集合将被移除。例如: ng-hide 指令会添加一下类:

ng-animate
ng-hide-animate
ng-hide-add (如果元素将被隐藏)
ng-hide-remove (如果元素将显示)
ng-hide-add-active (如果元素将隐藏)
ng-hide-remove-active (如果元素将显示)

使用 CSS 动画

我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果,该部分内容你可以参阅我们的 CSS 过渡教程, CSS 动画教程。

CSS 过渡

CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个:

实例

在 DIV 元素设置了 .ng-hide 类时,过渡需要花费 0.5 秒,高度从 100px 变为 0:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div {
 transition: all linear 0.5s;
 background-color: lightblue;
 height: 100px;
}

.ng-hide {
 height: 0;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<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>

</body>
</html>

CSS 动画

CSS 动画允许你平滑的修改 CSS 属性值:

实例

在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行,它会平滑的将高度从 100px 变为 0:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes myChange {
 from {
   height: 100px;
 } to {
   height: 0;
 }
}

div {
 height: 100px;
 background-color: lightblue;
}

div.ng-hide {
 animation: 0.5s myChange;
}
</style>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">

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

<div ng-hide="myCheck">
</div>


</body>
</html>

以上就是对AngularJS 动画的资料整理,有需要的小伙伴参考下。

Javascript 相关文章推荐
起点页面传值js,有空研究学习下
Jan 25 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
May 07 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
Python脚本后台运行的几种方式
Mar 09 Javascript
jQuery判断元素上是否绑定了指定事件的方法
Mar 17 Javascript
js使用onmousemove和onmouseout获取鼠标坐标的方法
Mar 31 Javascript
js仿支付宝多方框输入支付密码效果
Sep 27 Javascript
JS中位置与大小的获取方法
Nov 22 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
Jul 28 #Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 #Javascript
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
AngularJS中的API(接口)简单实现
Jul 28 #Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 #Javascript
You might like
php empty,isset,is_null判断比较(差异与异同)
2010/10/19 PHP
一个PHP分页类的代码
2011/05/18 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
PHP Filter过滤器全面解析
2016/08/09 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
jquery 循环显示div的示例代码
2013/10/18 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
js判断子窗体是否关闭的方法
2015/08/11 Javascript
angularjs学习笔记之三大模块(modal,controller,view)
2015/09/26 Javascript
jquery attr()设置和获取属性值实例教程
2016/09/25 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
Vue 表单控件绑定的实现示例
2017/08/11 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
jQuery 淡入/淡出效果函数用法分析
2020/05/19 jQuery
python 正则式 概述及常用字符
2009/05/07 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
Python Pandas找到缺失值的位置方法
2018/04/12 Python
python3处理含有中文的url方法
2018/05/10 Python
Python3基础教程之递归函数简单示例
2019/06/07 Python
Python 中的参数传递、返回值、浅拷贝、深拷贝
2019/06/25 Python
django drf框架中的user验证以及JWT拓展的介绍
2019/08/12 Python
Python 寻找局部最高点的实现
2019/12/05 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
StubHub意大利:购买和出售全球演唱会和体育赛事门票
2017/11/21 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
基督教婚礼主持词
2014/03/14 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
MYSQL如何查看操作日志详解
2022/05/30 MySQL
Java实现简单小画板
2022/06/10 Java/Android