AngularJS(14)-动画
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)-动画的更多相关文章
- 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画
[源码下载] 背水一战 Windows 10 (14) - 动画: 线性动画, 关键帧动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 线性动画 - ColorAnimatio ...
- AngularJS:动画
ylbtech-AngularJS:动画 1.返回顶部 1. AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angula ...
- AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
- AngularJS–Animations(动画)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在AngularJS 1.3 中,给一些指令(eg: ngRepeat,ngSw ...
- avalon2学习教程14动画使用
avalon2实际上没有实现完整的动画模块,它只是对现有的CSS3动画或jquery animate再包装一层. 我们先说如何用CSS3为avalon实现动画效果.首先要使用avalon.effect ...
- 夺命雷公狗—angularjs—14—$location的作用
废话不多说看下,我们直接来走代码看下效果如何 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- AngularJS动画
1.AngularJS提供了动画效果,可以配合CSS使用: 2.AngularJS使用动画需要引入angular-animate.min.js库 <script src="http:/ ...
- AngularJS 动画
AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script src="htt ...
- AngularJS中的动画实现
AngularJS 动画 AngularJS 提供了动画效果,可以配合 CSS 使用. AngularJS 使用动画需要引入 angular-animate.min.js 库. <script ...
随机推荐
- DataGridView重绘painting简单实例
private void dataGridViewX1_CellPainting(object sender, DataGridViewCellPaintingEventArgs e) { & ...
- python获取每颗cpu使用率
以下是关于python来获取服务器每颗CPU使用率的使用脚本. #!/usr/bin/env python # -*- coding: utf-8 -*- import re,time def _re ...
- ios优化复制大文件时,如何使内存运用最少且效率最高
我也是纠结了好几天,我想自己想个办法,但是数据复制不上去,我现在还不明白,如果有人知道我错在哪了,请留言,如果还有更好的方法,请分享共同进步. ____________________________ ...
- 基于阿里云ECS的phpwind网站备案前如何远程访问调试?
基于阿里云ECS的phpwind网站部署非常方便,但云主机的外网IP绑定域名却比较复杂.先要申请域名,成功后还需要备案.尤其是企业网站备案,需要提交的资料较多,准备资料以及审批的时间较长.这段时间在外 ...
- Java Script基础(九) 下拉列表对象
Select下拉列表 属性: options[]:返回包含下拉列表中的所有选项的一个数组. selectedIndex:设置返回下拉列表中被选项目的索引号. length:返回下拉列表框中选项的数目. ...
- Eclipse中web项目的默认发布路径改为外部Tomcat中webapp路径
可参考http://www.cnblogs.com/mihu/p/4772509.html 和http://www.cnblogs.com/dyllove98/archive/2013/06/07/3 ...
- 洛谷P1251 餐巾(网络流)
P1251 餐巾 15通过 95提交 题目提供者该用户不存在 标签网络流贪心 难度提高+/省选- 提交该题 讨论 题解 记录 最新讨论 为什么我全部10个测试点都对… 题目描述 一个餐厅在相继的N天里 ...
- oracle中的instr()
INSTR (源字符串, 目标字符串, 起始位置, 匹配序号) 在Oracle/PLSQL中,instr函数返回要截取的字符串在源字符串中的位置.只检索一次,就是说从字符的开始 到字符的结尾就结束. ...
- 【CSS3】---结构性伪类选择器-first-child+last-child
结构性伪类选择器—first-child “:first-child”选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 ...
- 非web项目中使用XDT的实例(续)
简化 上个实例中,我们是引用了target文件来遍历项目中的xdt项. 当项目比较小,我们又只需要针对固定的config文件进行更替时,可以使用更简化的方法 不进行项目配置文件中的插入<Impo ...