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学习篇（二十一）的更多相关文章

  1. AngularJS学习篇（十一）

    AngularJS 表格 ng-repeat 指令可以完美的显示表格. <!DOCTYPE html> <html> <head> <meta charset ...

  2. python3.4学习笔记(二十一) python实现指定字符串补全空格、前面填充0的方法

    python3.4学习笔记(二十一) python实现指定字符串补全空格.前面填充0的方法 Python zfill()方法返回指定长度的字符串,原字符串右对齐,前面填充0.zfill()方法语法:s ...

  3. 学习笔记：CentOS7学习之二十一： 条件测试语句和if流程控制语句的使用

    目录 学习笔记:CentOS7学习之二十一: 条件测试语句和if流程控制语句的使用 21.1 read命令键盘读取变量的值 21.1.1 read常用见用法及参数 21.2 流程控制语句if 21.2 ...

  4. (C/C++学习笔记) 二十一. 异常处理

    二十一. 异常处理 ● 异常的概念 程序的错误通常包括:语法错误.逻辑错误.运行异常. 语法错误指书写的程序语句不合乎编译器的语法规则,这种错误在编译.连接时由编译器指出. 逻辑错误是指程序能顺利运行 ...

  5. AngularJS学习篇（二十四）

    AngularJS 应用 <html ng-app="myNoteApp"> <head> <meta charset="utf-8&quo ...

  6. AngularJS学习篇（二十三）

    AngularJS 路由 AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web applica ...

  7. AngularJS学习篇（二十二）

    AngularJS 依赖注入 什么是依赖注入 wiki 上的解释是:依赖注入(Dependency Injection,简称DI)是一种软件设计模式,在这种模式下,一个或更多的依赖(或服务)被注入(或 ...

  8. AngularJS学习篇（二十）

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: < ...

  9. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

随机推荐

  1. Java基础——集合源码解析 List List 接口

    今天我们来学习集合的第一大体系 List. List 是一个接口,定义了一组元素是有序的.可重复的集合. List 继承自 Collection,较之 Collection,List 还添加了以下操作 ...

  2. Android Framework 初探

    最近工作任务不忙,学习一下Android Framework方面的知识. 一.介绍,是什么 Android的Framework是直接应用之下的一层,叫做应用程序框架层.这一层是核心应用程序所使用的AP ...

  3. MySQL数据库设计基础

    为什么需要规范的数据库设计? 什么是数据库设计? 数据库设计就是将数据库中的数据实体及这些数据实体之间的关系,进行规划和结构化的过程. 数据库设计非常重要! 数据库中创建的数据结构的种类,以及在数据实 ...

  4. ios小型服务器环境配置

    之前买的一台二手iphone4退役了,上闲鱼上一看,就值200,而且耳机声音也有点轻,估计买不了什么钱 于是网上看看能不能有什么废物利用的法子,看到说做行车记录仪的,有说做git服务器的,感觉挺有兴趣 ...

  5. 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 ...

  6. 箱线图(boxplot)简介与举例

    简述:   盒图是在1977年由美国的统计学家约翰·图基(John Tukey)发明的.它由五个数值点组成:最小值(min),下四分位数(Q1),中位数(median),上四分位数(Q3),最大值(m ...

  7. python concurrent.futures

    python因为其全局解释器锁GIL而无法通过线程实现真正的平行计算.这个论断我们不展开,但是有个概念我们要说明,IO密集型 vs. 计算密集型. IO密集型:读取文件,读取网络套接字频繁. 计算密集 ...

  8. 关于java的自动拆装箱若干细节问题

    一.首先需要了解的几个前提: 1.自动装箱过程是通过调用valueOf方法实现的(如Integer.valueOf(10)),而拆箱过程是通过调用包装器的 xxxValue方法实现的(如Integer ...

  9. Github Page+Bmob实现简单动态功能

    Github Page基于jekyll能够实现简单的静态网站,但是没有提供后端服务.目前国内外也有很多提供后台服务,特别是云服务.譬如国外有AWS,记得好像是注册免费使用一年:再如Heroku,支持N ...

  10. 【爬虫入门01】我第一只由Reuests和BeautifulSoup4供养的Spider

    [爬虫入门01]我第一只由Reuests和BeautifulSoup4供养的Spider 广东职业技术学院  欧浩源 1.引言  网络爬虫可以完成传统搜索引擎不能做的事情,利用爬虫程序在网络上取得数据 ...