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. GET和POST的主要区别
			
    1.get是从服务器上获取数据,post是向服务器传送数据 2.在客户端上,get通过url提交数据,数据在url上可以看到,post方式,数据放置在HTMLHEADER内提交 3.对于get方式,服 ...
    
			
    2. 
						
  2. 【Java/Android性能优化1】Android性能调优
			
    本文参考:http://www.trinea.cn/android/android-performance-demo/ 本文主要分享自己在appstore项目中的性能调优点,包括同步改异步.缓存.La ...
    
			
    3. 
						
  3. ARC 和 MRC 小结
			
    ARC 和 MRC 内存管理 从 MRC—>ARC 就是将内存管理部分,从开发者的函数中转移到函数外部的runtime 中.由于 runtime 的开发简单,逻辑层次高,所以 runtime 的 ...
    
			
    4. 
						
  4. Angularjs 中使用指令绑定点击事件
			
    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> ...
    
			
    5. 
						
  5. C++类（一）
			
    #include<iostream> #include<string> using namespace std; //找了很久,似乎都是类放在Main方法体上 class Pe ...
    
			
    6. 
						
  6. Part 3  ViewData and ViewBag in mvc
			
    ViewBag and ViewData is a mechanism(机制) to pass data from controller to view. We use '@' symbol(符号)  ...
    
			
    7. 
						
  7. Java之组合数组2
			
    编写函数Fun,其功能是将两个两位数的正整数A.B合并为一个整数放在C中,将A数的十位和个位一次放在C的个位和十位上,A数的十位和个位一次放在C的百位和千位上.例如,当 A=16,B=35,调用该函数 ...
    
			
    8. 
						
  8. JAVA之网页截屏
			
    先吐槽一下下: 表示接近两个月没有敲代码了,现在看一下代码都感觉有点生了.三天打鱼两天晒网是不行的,再说我本来就有“健忘症”,真的是木有办法啊￣へ￣.我一直信奉一句话:“勤能补拙”,它也是我学习路上的 ...
    
			
    9. 
						
  9. AJAX之JSON
			
    AJAX=Asynchronous JavaScript and XML(异步的JavaScript 和XML). AJAX不是新的编程语言,而是一种是用现代标准的新方法,用于创建快速动态网页的技术. ...
    
			
    10. 
						
  10. Android之天气APP
			
    做一个天气信息APP,通过读取公开发布的气象数据,提供实时天气更新,帮助用户时刻了解天气情况.通过APP可以查询到自己所处位置的天气预报,也可以通过定位系统,获取省内任意位置的气象环境信息. API接 ...
    
			
    11.