AngularJS学习篇(二十一)
AngularJS 动画
AngularJS 提供了动画效果,可以配合 CSS 使用。
AngularJS 使用动画需要引入 angular-animate.min.js 库。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<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 type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
<script type="text/javascript" src="angular-animate.js" charset="utf-8"></script> </head>
<body ng-app="ngAnimate"> <h1>隐藏 DIV: <input type="checkbox" ng-model="myCheck"></h1> <div ng-hide="myCheck"></div>
</body>
</html>
如果我们应用已经设置了应用名,可以把 ngAnimate 直接添加在模型中:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<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 type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
<script type="text/javascript" src="angular-animate.js" charset="utf-8"></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>
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 属性值修改为另外一个:在 DIV 元素设置了 .ng-hide
类时,过渡需要花费 0.5 秒,高度从 100px 变为 0:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<style>
div {
transition: all linear 0.5s;
background-color: lightblue;
height: 100px;
} .ng-hide {
height: 0;
} </style>
<script type="text/javascript" src="angular-1.4.6.js" charset="utf-8"></script>
<script type="text/javascript" src="angular-animate.js" charset="utf-8"></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>
在 DIV 元素设置了 .ng-hide
类时, myChange
动画将执行,它会平滑的将高度从 100px 变为 0:
<style>
@keyframes myChange {
from {
height: 100px;
} to {
height: 0;
}
}
div {
height: 100px;
background-color: lightblue;
}
div.ng-hide {
animation: 0.5s myChange;
}
</style>
AngularJS学习篇(二十一)的更多相关文章
- AngularJS学习篇(十一)
AngularJS 表格 ng-repeat 指令可以完美的显示表格. <!DOCTYPE html> <html> <head> <meta charset ...
- python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法
python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...
- 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用
目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...
- (C/C++学习笔记) 二十一. 异常处理
二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...
- AngularJS学习篇(二十四)
AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...
- AngularJS学习篇(二十三)
AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...
- AngularJS学习篇(二十二)
AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...
- AngularJS学习篇(二十)
AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...
- AngularJS学习篇(十二)
AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...
随机推荐
- Java基础——集合源码解析 List List 接口
今天我们来学习集合的第一大体系 List. List 是一个接口,定义了一组元素是有序的.可重复的集合. List 继承自 Collection,较之 Collection,List 还添加了以下操作 ...
- Android Framework 初探
最近工作任务不忙,学习一下Android Framework方面的知识. 一.介绍,是什么 Android的Framework是直接应用之下的一层,叫做应用程序框架层.这一层是核心应用程序所使用的AP ...
- MySQL数据库设计基础
为什么需要规范的数据库设计? 什么是数据库设计? 数据库设计就是将数据库中的数据实体及这些数据实体之间的关系,进行规划和结构化的过程. 数据库设计非常重要! 数据库中创建的数据结构的种类,以及在数据实 ...
- ios小型服务器环境配置
之前买的一台二手iphone4退役了,上闲鱼上一看,就值200,而且耳机声音也有点轻,估计买不了什么钱 于是网上看看能不能有什么废物利用的法子,看到说做行车记录仪的,有说做git服务器的,感觉挺有兴趣 ...
- Two Sum IV - Input is a BST
Given a Binary Search Tree and a target number, return true if there exist two elements in the BST s ...
- 箱线图(boxplot)简介与举例
简述: 盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数值点组成:最小值(min),下四分位数(Q1),中位数(median),上四分位数(Q3),最大值(m ...
- python concurrent.futures
python因为其全局解释器锁GIL而无法通过线程实现真正的平行计算.这个论断我们不展开,但是有个概念我们要说明,IO密集型 vs. 计算密集型. IO密集型:读取文件,读取网络套接字频繁. 计算密集 ...
- 关于java的自动拆装箱若干细节问题
一.首先需要了解的几个前提: 1.自动装箱过程是通过调用valueOf方法实现的(如Integer.valueOf(10)),而拆箱过程是通过调用包装器的 xxxValue方法实现的(如Integer ...
- Github Page+Bmob实现简单动态功能
Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...
- 【爬虫入门01】我第一只由Reuests和BeautifulSoup4供养的Spider
[爬虫入门01]我第一只由Reuests和BeautifulSoup4供养的Spider 广东职业技术学院 欧浩源 1.引言 网络爬虫可以完成传统搜索引擎不能做的事情,利用爬虫程序在网络上取得数据 ...