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-hideng-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的大家有所帮助

Javascript 相关文章推荐
jQuery示例收集
Nov 05 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
jquery实现textarea输入框限制字数的方法
Jan 15 Javascript
基于javascript实现的购物商城商品倒计时实例
Dec 11 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
Aug 12 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
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
You might like
收集的php编写大型网站问题集
2007/03/06 PHP
PHP insert语法详解
2008/06/07 PHP
PHP读取XML值的代码(推荐)
2011/01/01 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
PHP基于SPL实现的迭代器模式示例
2018/04/22 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
combox改进版 页面原型参考dojo的,比网上jQuery的那些combox功能强,代码更小
2010/04/15 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
2010/11/05 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
2016/08/17 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
Vue工程模板文件 webpack打包配置方法
2017/12/26 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
vue.js实现图书管理功能
2019/09/24 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
js验证账户名是否重复
2020/05/26 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
python fabric实现远程部署
2017/01/05 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Django渲染Markdown文章目录的方法示例
2019/01/02 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
python同时遍历两个list用法说明
2020/05/02 Python
python3.7添加dlib模块的方法
2020/07/01 Python
python中封包建立过程实例
2021/02/18 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
干部个人对照检查材料
2014/08/25 职场文书
涨价通知怎么写
2015/04/23 职场文书
2019思想汇报范文
2019/05/21 职场文书