首页
所有分类
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 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
JavaScript判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
让jQuery与其他JavaScript库并存避免冲突的方法
Dec 23 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
javaScript知识点总结(必看篇)
Jun 10 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
Javascript实现数组中的元素上下移动
Apr 28 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 Javascript
javaScript中indexOf用法技巧
Nov 26 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) 排序失效(1) 重复数据(2) 临时表(1) 批处理(1) Logrotate(1) T-SQL(1) timestamp(1) NFS(1) 表变量(1)
You might like
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
php下载远程文件类(支持断点续传)
2008/11/14 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
2014/08/12 Javascript
一款基jquery超炫的动画导航菜单可响应单击事件
2014/11/02 Javascript
根据输入邮箱号跳转到相应登录地址的解决方法
2016/12/13 Javascript
使用store来优化React组件的方法
2017/10/23 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
探索node之事件循环的实现
2020/10/30 Javascript
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python 给DataFrame增加index行名和columns列名的实现方法
2018/06/08 Python
python如何爬取个性签名
2018/06/19 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
opencv实现简单人脸识别
2021/02/19 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
Myprotein丹麦官网：欧洲第一运动营养品牌
2019/04/15 全球购物
2014年五一促销活动方案
2014/03/09 职场文书
预备党员入党自我评价范文
2014/03/10 职场文书
技术负责人岗位职责
2015/02/10 职场文书
迎客户欢迎词三篇
2019/09/27 职场文书
创业计划书之服装
2019/10/07 职场文书
新手入门Mysql--概念
2021/06/18 MySQL
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL