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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
javascript 写类方式之四
Jul 05 Javascript
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
JavaScript 继承详解(五)
Oct 11 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
echarts实现词云自定义形状的示例代码
Feb 20 Javascript
详解django模板与vue.js冲突问题
Jul 07 Javascript
你准备好迎接vue3.0了吗
Apr 28 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执行批量mysql语句的解决方法
2013/05/02 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Laravel 使用查询构造器配合原生sql语句查询的例子
2019/10/12 PHP
Javascript Jquery 遍历Json的实现代码
2010/03/31 Javascript
JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结
2010/04/13 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jQuery延迟执行的实现方法
2016/12/21 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
实例分析编写vue组件方法
2019/02/12 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
在Ubuntu系统下安装使用Python的GUI工具wxPython
2016/02/18 Python
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python实现log日志的示例代码
2018/04/28 Python
Python用类实现扑克牌发牌的示例代码
2020/06/01 Python
keras实现基于孪生网络的图片相似度计算方式
2020/06/11 Python
python 实现波浪滤镜特效
2020/12/02 Python
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
英国女性时尚品牌:Apricot
2018/12/04 全球购物
汽车技术服务英文求职信范文
2014/01/02 职场文书
师范类求职信
2014/06/21 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
mysql部分操作
2021/04/05 MySQL
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Python利用机器学习算法实现垃圾邮件的识别
2021/06/28 Python
JavaScript的Set数据结构详解
2022/02/18 Javascript
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS