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. Spring3.2不支持jdk8

    解决方案: http://stackoverflow.com/questions/24128045/spring-context-initialization-failed-with-java-lan ...

  2. HDFS源码分析之NameNode（3）————RpcServer

    NameNodeRpcServer implements NamenodeProtocols NameNode支持核心即NameNodeRpcServer 实现ClientProtocol  支持客户 ...

  3. hdu1116有向图判断欧拉通路判断

    Play on Words Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) T ...

  4. http://codeforces.com/contest/828

    哇这是我打的第一场cf,第一题都wa了无数次,然后第二题差几分钟交 ,第二天一交就AC了内心是崩溃的.果然我还是太菜l.... A. Restaurant Tables time limit per ...

  5. 混合高斯模型（Mixtures of Gaussians）和EM算法

    这篇讨论使用期望最大化算法(Expectation-Maximization)来进行密度估计(density estimation). 与k-means一样,给定的训练样本是,我们将隐含类别标签用表示 ...

  6. Java面向对象 线程技术--上篇

     Java面向对象   线程 知识概要:                   (1)线程与进程 (2)自定义线程的语法结构 (3)多线程概念理解 (4)多线程状态图 (5)多线程--卖票 (6)同 ...

  7. VB改变文件及文件夹属性的函数

    '以下为FSO对象的使用示例(VB6.0) Private myFSO As New FileSystemObject Private myFile As File Private myFolder ...

  8. WPF DataGrid复制单元格问题

    当复制出现 以下错误时:System.Runtime.InteropServices.COMException (0x800401D0),这是在WPF剪贴板程序错误. 解决方法:则在需要在App.xa ...

  9. php 守护进程类

    最近个人项目中需要后台运行任务,之前一直是用nouhp & + 重定向输出 来后台跑任务,后来觉得不好维护原始数据,同时可能也没有直接操作进程那么稳吧(没验证).废话少说,来看分析. 首先,我 ...

  10. HTML笔记<note1>

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...