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. AngularJS特性
			
    如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性.简单来说Angular.js是google开发者设计和开发的一套前端开发框 ...
    
			
    2. 
						
  2. IQueryable与IEnumberable的区别
			
    IEnumerable接口 公开枚举器,该枚举器支持在指定类型的集合上进行简单迭代.也就是说:实现了此接口的object,就可以直接使用foreach遍历此object: IQueryable 接口  ...
    
			
    3. 
						
  3. 基本java类-In.java
			
    package com.algorithm.api; /************************************************************************ ...
    
			
    4. 
						
  4. jQuery的deferred对象详解（一）
			
    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
    
			
    5. 
						
  5. Javascript计算中英文混输字符串长度V2
			
    同上篇, client端也需要同样规则验证 compact_strlen: function(str) { var strlen = 0; for(var i =0; i<str.length; ...
    
			
    6. 
						
  6. 【CSS3】---属性选择器
			
    在HTML中,通过各种各样的属性可以给元素增加很多附加的信息.例如,通过id属性可以将不同div元素进行区分. 在CSS2中引入了一些属性选择器,而CSS3在CSS2的基础上对属性选择器进行了扩展,新 ...
    
			
    7. 
						
  7. 【转】用java实例学习MVC模式
			
    .1 MVC模式 MVC是三个单词的缩写,这三个单词分别为:模型(Model).视图(View)和控制(Controller).MVC模式的目的就是实现Web系统的职能分工.下面以J2EE开发进行介绍 ...
    
			
    8. 
						
  8. Win7如何快速修复系统
			
    Windows 7可能是微软迄 今为止最好的桌面操作系统,但是偶尔出现一些问题还是在所难免的.这里教你如何快速修复出现问题的Windows 7系统,每个操作系统都有重新安装的可能,Windows 7也 ...
    
			
    9. 
						
  9. CSS之shasow（阴影）
			
    参考https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow box-shadow属性向框添加一个或多个阴影.语法先上: box-shad ...
    
			
    10. 
						
  10. 解决windows端口被占用
			
    1, Cmd输入命令:netstat  –ano|findstr  “端口号” ,如netstat  –ano|findstr  “8080” 记下PID,最后一行为PID,这里为396 2,Cmd输 ...
    
			
    11.