首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

AngularJS入门之动画

Posted in Javascript onJuly 27, 2016

前言

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">

1、什么是动画？

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

<!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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="ngAnimate">
<h3>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
</body>
</html>

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="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
</head>
<body ng-app="myApp">
<h3>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h3>
<div ng-hide="myCheck"></div>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
</body>
</html>

2、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。

（1）、ng-class指定 HTML 元素使用的 CSS 类

ng-class 指令用于给 HTML 元素动态绑定一个或多个 CSS 类。ng-class 指令的值可以是字符串，对象，或一个数组。如果是字符串，多个类名使用空格分隔。如果是对象，需要使用 key-value 对，key 是一个布尔值，value 为你想要添加的类名。只有在 key 为 true 时类才会被添加。如果是数组，可以由字符串或对象组合组成，数组的元素可以是字符串或对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.js"></script>
<style>
.sky {
  color:white;
  background-color:lightblue;
  padding:20px;
  font-family:"Courier New";
}
.tomato {
  background-color:coral;
  padding:40px;
  font-family:Verdana;
}
</style>
</head>
<body ng-app="">
<span>选择一个类:</span>
<select ng-model="home">
<option value="sky">天空色</option>
<option value="tomato">番茄色</option>
</select>
<div ng-class="home">
 <h3>Welcome Home!</h3>
 <h4>I like it!</h4>
</div>
</body>
</html>

AngularJS入门之动画

（2）、ng-class-even类似 ng-class，但只在偶数行起作用；ng-class-odd 类似 ng-class，但只在奇数行起作用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<style>
.stripedeven {
  color:white;
  background-color:cyan;
}
.stripedodd{
 color:white;
  background-color:yellowgreen;
}
</style>
</head>
<body ng-app="myApp">
<table ng-controller="myCtrl" border="1px">
<tr>
 <th>Name</th>
 <th>Country</th>
</tr>
<tr ng-repeat="x in records" ng-class-even="'stripedeven'" ng-class-odd="'stripedodd'">
 <td>{{x.Name}}</td>
 <td>{{x.Country}}</td> 
</tr>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
 $scope.records = [
  {
   "Name" : "Alfreds Futterkiste",
   "Country" : "Germany"
  },
  {
   "Name" : "Berglunds snabbk",
   "Country" : "Sweden"
  },
  {
   "Name" : "Centro comercial Moctezuma",
   "Country" : "Mexico"
  },
  {
   "Name" : "Ernst Handel",
   "Country" : "Austria"
  }
 ]
});
</script>
</body>
</html>

AngularJS入门之动画

（3）、ng-if如果条件为 false 移除 HTML 元素

ng-if 指令用于在表达式为 false 时移除 HTML 元素。如果 if 语句执行的结果为 true，会添加移除元素，并显示。ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而 ng-if 是从 DOM 中移除元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="" ng-init="myVar = true">
<h3>保留 HTML: <input type="checkbox" ng-model="myVar" ></h3>
<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>
<p>当复选框取消选中时 DIV 元素将移除。</p>
<p>当重新选中复选框，DIV 元素会重新显示。</p>
</body>
</html>

AngularJS入门之动画

（4）、ng-checked规定元素是否被选中

ng-checked 指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性。如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="">
  <h3>My cars:</h3>
  <input type="checkbox" ng-model="all"> Check all<br>
  <input type="checkbox" ng-checked="all">Volvo<br>
  <input type="checkbox" ng-checked="all">Ford<br>
  <input type="checkbox" ng-checked="all">Mercedes
  <h3>点击 "Check all" 选择所有的车。</h3>
</body>
</html>

 AngularJS入门之动画

3、使用 CSS 动画

我们可以使用 CSS transition(过渡) 或 CSS 动画让 HTML 元素产生动画效果。

（1）、CSS 过渡

CSS 过渡可以让我们平滑的将一个 CSS 属性值修改为另外一个：在 DIV 元素设置了 .ng-hide 类时，过渡需要花费 0.5 秒，高度从 100px 变为 0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
div {
 transition: all linear 0.5s;
 background-color: lightblue;
 height: 100px;
}
.ng-hide {
 height: 0;
}
</style>
</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>

（2）、CSS 动画

CSS 动画允许你平滑的修改 CSS 属性值:在 DIV 元素设置了 .ng-hide 类时, myChange 动画将执行，它会平滑的将高度从 100px 变为 0。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>angularJs</title>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>
<style>
@keyframes myChange {
 from {
   height: 100px;
 } to {
   height: 10;
 }
}
div {
 height: 100px;
 background-color: lightblue;
}
div.ng-hide {
 animation: 10s myChange;
}
</style>
</head>
<body ng-app="ngAnimate">
隐藏 DIV: <input type="checkbox" ng-model="myCheck">
<div ng-hide="myCheck">
</div>
</body>
</html>

总结

以上就是关于AngularJS动画的全部内容，本文总结的很详细，并提供了实例代码，希望对学些AngularJS的大家有所帮助

AngularJS入门之动画

- Author -

daisy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
你真的了解JavaScript吗？
Feb 24 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JS等比例缩小图片尺寸的实例
Feb 27 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
js 设置缓存及获取设置的缓存
May 08 Javascript
JavaScript极简入门教程（一）：基础篇
Oct 25 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
Feb 28 Javascript
浅谈javascript中的闭包
May 13 Javascript
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
vue 集成jTopo 处理方法
Aug 07 Javascript
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 #Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 #Javascript
AngularJS 模型详细介绍及实例代码
Jul 27 #Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 #Javascript
详解Angular开发中的登陆与身份验证
Jul 27 #Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 #Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 #Javascript
下载(1) Harman Kardon(1) 无线电(12) 电台频率(32) 怀旧期刊(1) 短波(8) 保养(1) 广播(8) 长波(3) 收音机(62)
You might like
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
php curl模拟post请求小实例
2013/11/13 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
巧用replace将文字表情替换为图片
2014/04/17 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
jQuery插件pagination实现无刷新分页
2016/05/21 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
Vue.js计算属性computed与watch（5）
2016/12/09 Javascript
js模糊查询实例分享
2016/12/26 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
Node中使用ES6语法的基础教程
2018/01/05 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
vue实现提示保存后退出的方法
2018/03/15 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
小程序实现多个选项卡切换
2020/06/19 Javascript
js实现跳一跳小游戏
2020/07/31 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[01:32]TI奖金增速竟因它再创新高！DOTA2勇士令状不朽珍藏Ⅰ饰品欣赏
2018/05/18 DOTA
详谈python中冒号与逗号的区别
2018/04/18 Python
对numpy中的where方法嵌套使用详解
2018/10/31 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
Python接口测试get请求过程详解
2020/02/28 Python
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
Mountain Warehouse波兰官方网站：英国户外品牌
2019/08/29 全球购物
办公室前台岗位职责范本
2013/12/10 职场文书
四风问题对照检查材料
2014/09/22 职场文书
2015教师年度工作总结范文
2015/04/07 职场文书
召开会议通知范文
2015/04/15 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
单位车辆管理制度
2015/08/05 职场文书
六年级作文之预言作文
2019/10/25 职场文书
八年级作文之友谊
2019/12/02 职场文书
简单聊一聊SQL注入及防止SQL注入
2022/03/23 MySQL