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. flume1.5.2安装与简介
			
    关于flume的简介看参考:http://www.aboutyun.com/thread-7415-1-1.html 其实一张图就简单明了了 简单安装: 1.下载解压 ... 2.配置JDK,flum ...
    
			
    2. 
						
  2. ApplePay高调入华，教你在app里上线ApplePay
			
      ApplePay在中国上线后,就有许多线上app前后脚加入了对其的接入支持,个人比较喜欢的ENJOY也抢在首批接入了ApplePay应用内支付.本文将分享作者的接入经验. ApplePay是苹果公 ...
    
			
    3. 
						
  3. C#求所有可能的排列组合
			
    static System.Collections.Specialized.StringCollection MakeStrings(string[] characters, int finalStr ...
    
			
    4. 
						
  4. Wcf 之 配置文件解析
			
    在WCF Service Configuration Editor的使用中,我们通过配置工具自动生成了WCF服务端的config文件.现在我们来看下这个配置文件各个标签的意义(解释在下面xml文件中的 ...
    
			
    5. 
						
  5. 1.6.5 Updating Parts of Documents
			
    1. Updating Parts of Documents 有时候你想要直接改变solr文档中的部分内容,solr有两种合适的方法来改变. 第一种:自动更新,这个方法允许仅仅改变文档的一个或者几个字 ...
    
			
    6. 
						
  6. 1.4.9 DocValues
			
    DocValues 在solr4.2以后,引入了一个令人兴奋的功能,这个功能在lucene存在已经一段时间了,但是还没有在solr中使用. 在某些方面,DocValue 是一种非常有效的索引方式. 为 ...
    
			
    7. 
						
  7. 【Android Api 翻译3】android api 完整翻译之Application Fundamentals （学习android必须知道的）
			
    Android应用程序是用Java编程语言编写的.Android SDK工具把应用程序的代码.数据和资源文件一起编译到一个Android程序包中(这个程序包是以.apk为后缀的归档文件),一个Andr ...
    
			
    8. 
						
  8. Java Script基础（九） 下拉列表对象
			
    Select下拉列表 属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...
    
			
    9. 
						
  9. HDU 1875 畅通工程再续 (最小生成树)
			
    畅通工程再续 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
    
			
    10. 
						
  10. 剑指Offer41 反转单词顺序，单词字符顺序不变
			
    /************************************************************************* > File Name: 41_Revers ...
    
			
    11.