AngularJS 提供了动画效果，可以配合 CSS 使用。

AngularJS 使用动画需要引入 angular-animate.min.js 库。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>动画</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 src="angular-1.4.1/angular.min.js"></script>

    <script src="angular-1.4.1/angular-animate.min.js"></script><!--动画库-->

</head>

<body ng-app="ngAnimate">

  <h1>隐藏DIV:<input type="checkbox" ng-model="myCheck"></h1>

  <div ng-hide="myCheck"></div>

  <script>

      var app = angular.module('myApp',['ngAnimate']);

  </script>

</body>

</html>

　　

												


											
AngularJS(14)-动画的更多相关文章
	

    
								
  1. 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画
		
    [源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...
    
		
    2. 
						
  2. AngularJS：动画
		
    ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angula ...
    
		
    3. 
						
  3. AngularJS学习--- 动画操作 (Applying Animations) ngAnimate　step 12
		
    1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
    
		
    4. 
						
  4. AngularJS–Animations(动画)
		
    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...
    
		
    5. 
						
  5. avalon2学习教程14动画使用
		
    avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...
    
		
    6. 
						
  6. 夺命雷公狗—angularjs—14—$location的作用
		
    废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta  ...
    
		
    7. 
						
  7. AngularJS动画
		
    1.AngularJS提供了动画效果,可以配合CSS使用: 2.AngularJS使用动画需要引入angular-animate.min.js库 <script src="http:/ ...
    
		
    8. 
						
  8. AngularJS 动画
		
    AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...
    
		
    9. 
						
  9. AngularJS中的动画实现
		
    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. WPF 之 布局（三）
			
    六.DockPanel DockPanel定义一个区域,在此区域中,您可以使子元素通过描点的形式排列,这些对象位于 Children 属性中.停靠面板其实就是在WinForm类似于Dock属性的元 素 ...
    
			
    2. 
						
  2. Mybank
			
    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
    
			
    3. 
						
  3. cigarettes
			
    描述 Tom has many cigarettes. We hypothesized that he has n cigarettes and smokes them one by one keep ...
    
			
    4. 
						
  4. (转)Android学习笔记③——常用快捷键
			
    常用快捷键 代码跳转 描述:跳转是为了方便代码位置的定位,存在两种跳转:在定义处可以跳转到调用处,在调用处可以跳转到定义处. 快捷键:Cmd + 鼠标单击 方法间跳转 描述:从一个类方法跳转到临近的一 ...
    
			
    5. 
						
  5. 个人总结ANDROID开发事项
			
    theme:none,Holo Dark(全黑),Holo Light(全白),Holo Light width Dark action Bar(全白,活动栏是黑) Create Activity:  ...
    
			
    6. 
						
  6. 给力的轻量级JavaScript动画框架 - jsMorph
			
    jsMorph 是一个独立的轻量级 JavaScript 动画框架,可以用它来操纵多个 HTML 元素的样式,实现动画效果.此框架会自动检测起始位置.转换单位.调整渲染的速度,以此来获得更流畅的渲染体 ...
    
			
    7. 
						
  7. 剑指Offer18 顺时针打印矩阵
			
    /************************************************************************* > File Name: 18_PrintM ...
    
			
    8. 
						
  8. Python时间，日期，时间戳之间转换
			
    1.将字符串的时间转换为时间戳     方法:         a = "2013-10-10 23:40:00"         将其转换为时间数组         import ...
    
			
    9. 
						
  9. uva 12544 无向图最小环
			
    思路:这题的N有500,直接floyd肯定超时. 我的做法是每次枚举一个点,求出包含这个点的最小环. 对所有最小环取最小值.求包含某个点的最小环我用的是启发式搜索,先以该点求一次spfa,然后dfs解 ...
    
			
    10. 
						
  10. IFRAM的详细用法
			
    IFRAM的详细用法:   IFRAM的详细用法:  <IFRAME>用于设置文本或图形的浮动图文框或容器. BORDER <IFRAME BORDER="3"& ...
    
			
    11.