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 相关文章推荐
DOM基础教程之使用DOM控制表格
Jan 20 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
jQuery三级下拉列表导航菜单代码分享
Apr 15 Javascript
Bootstrap精简教程
Nov 27 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
Oct 07 Javascript
微信小程序 教程之模块化
Oct 17 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
vue-cli webpack 开发环境跨域详解
May 18 Javascript
Node.js引入UIBootstrap的方法示例
May 11 Javascript
vue生成token并保存到本地存储中
Jul 17 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 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函数实现判断是否移动端访问
2015/03/03 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
用JS在浏览器中创建下载文件
2014/03/05 Javascript
JQuery解析HTML、JSON和XML实例详解
2014/03/29 Javascript
使用GruntJS构建Web程序之合并压缩篇
2014/06/06 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
2015/08/04 Javascript
JS实现自动变化的导航菜单效果代码
2015/09/09 Javascript
基于ajax与msmq技术的消息推送功能实现代码
2016/12/26 Javascript
JS Select下拉框(支持输入模糊查询)
2017/02/04 Javascript
JS实现中国公民身份证号码有效性验证
2017/02/20 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
2019/01/03 Javascript
jQuery中DOM常见操作实例小结
2019/08/01 jQuery
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
部署vue+Springboot前后端分离项目的步骤实现
2020/05/31 Javascript
vue 项目@change多个参数传值多个事件的操作
2021/01/29 Vue.js
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
python set内置函数的具体使用
2019/07/02 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
Python 文件操作之读取文件(read),文件指针与写入文件(write),文件打开方式示例
2019/09/29 Python
pytorch实现MNIST手写体识别
2020/02/14 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
表达自我的市场:Society6
2018/08/01 全球购物
数据库笔试题
2013/05/09 面试题
简单英文演讲稿
2014/01/01 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2015年安全生产管理工作总结
2015/05/25 职场文书
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技