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 相关文章推荐
jquery 双色表格实现代码
Dec 08 Javascript
文本框回车提交与禁止提交示例
Sep 27 Javascript
jquery对元素拖动排序示例
Jan 16 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
阿里云ecs服务器中安装部署node.js的步骤
Oct 08 Javascript
深入理解jQuery.data() 的实现方式
Nov 30 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
node实现的爬虫功能示例
May 04 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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和Mysqlweb应用开发核心技术-第1部分 Php基础-2 php语言介绍
2011/07/03 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php修改指定文件后缀的方法
2014/09/11 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
JavaScript 对象链式操作测试代码
2010/04/25 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
Vue插件打包与发布的方法示例
2018/08/20 Javascript
vue基于viewer实现的图片查看器功能
2019/04/12 Javascript
JS实现基本的网页计算器功能示例
2020/01/16 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python的Socket编程过程中实现UDP端口复用的实例分享
2016/03/19 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
Python异常的检测和处理方法
2018/10/26 Python
Python列表如何更新值
2020/05/27 Python
HTML5 video 视频标签使用介绍
2014/02/03 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
2014/04/10 HTML / CSS
HTML5自定义mp3播放器源码
2020/01/06 HTML / CSS
施华洛世奇德国官网:SWAROVSKI德国
2017/02/01 全球购物
日本最大化妆品和美容产品的综合口碑网站:cosme shopping
2019/08/28 全球购物
公司拓展活动方案
2014/02/13 职场文书
《维生素c的故事》教学反思
2014/02/18 职场文书
出生公证书样本
2014/04/04 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
初中同学会活动方案
2014/08/22 职场文书
公司副总经理岗位职责
2014/10/01 职场文书
2014年小学工作总结
2014/11/26 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
无婚姻登记记录证明
2015/06/18 职场文书