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. AngularJS:动画

    ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angula ...

  3. AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12

    1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...

  4. AngularJS–Animations(动画)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/   在AngularJS 1.3 中,给一些指令(eg:   ngRepeat,ngSw ...

  5. avalon2学习教程14动画使用

    avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...

  6. 夺命雷公狗—angularjs—14—$location的作用

    废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. AngularJS动画

    1.AngularJS提供了动画效果,可以配合CSS使用: 2.AngularJS使用动画需要引入angular-animate.min.js库 <script src="http:/ ...

  8. AngularJS 动画

    AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...

  9. AngularJS中的动画实现

    AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...

随机推荐

  1. python 复杂表达式,以及表单的处理

    d = { 'Adam': 95, 'Lisa': 85, 'Bart': 59 } def generate_tr(name, score): if score < 60: return '& ...

  2. C# 之 FileSystemWatcher事件多次触发的解决方法

    1.问题描述  程序里需要监视某个目录下的文件变化情况: 一旦目录中出现新文件或者旧的文件被覆盖,程序需要读取文件内容并进行处理.于是使用了下面的代码: public void Initial() { ...

  3. spring mvc 的各种参数的绑定方式

    本文转自http://www.cnblogs.com/HD/p/4107674.html SpringMVC的各种参数绑定方式 1. 基本数据类型(以int为例,其他类似):Controller代码: ...

  4. VA中修改函数注释

    在VA中修改对应的函数和文件注释,可以使用VA自动产生函数和文件头注释 //************************************************************** ...

  5. Java学习笔记——JDK1.7的新特性。

    1,switch中可以使用字串 Java代码: String s = "test"; switch (s) { case "test" : System.out ...

  6. 《MFC游戏开发》笔记四 键盘响应和鼠标响应:让人物动起来

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9327377 作者:七十一雾央 新浪微博:http:// ...

  7. oracle PL/SQL(procedure language/SQL)程序设计

    PL/SQL(procedure language/SQL)语言是Oracle对SQL语言的过程化扩充,是一个完整的编程语言.PL/SQL实现了过程化语句(如分支.循环等)与SQL语句的无缝连接,将过 ...

  8. [wordpress]根据自定义字段排序并根据自定义字段查询

    Wordpress中,根据根据自定义字段排序和查询是通过WP_Query()方法 如根据 一个自定义的sort的数字字段从小到大进行排序 $args = array( 'post_type' => ...

  9. C之文件读写

    1.fopen() fopen的原型是:FILE *fopen(const char *filename,const char *mode),fopen实现三个功能:为使用而打开一个流,把一个文件和此 ...

  10. html form一点基础知识,实现文件上传

    form用于提交文件需要修改其entype属性. enctype属性:规定在发送表单数据之前如何对其进行编码. 默认情况,enctype的编码格式是application/x-www-form-url ...