结构-行为-样式-angularJs ngAnimate(Js实现)
- 声明
- 页面
- Js
- 注意事项
- 官方链接
一、声明
注意animate的版本要与Angular的一致。
<script src="jquery.1.9.1.min.js"></script>
<script src="angular.js"></script>
<script src="angular-animate.js"></script>二、页面
<body ng-app="myApp" ng-controller="myCtrl">
<div class="container">
<h3>Animation-js</h3>
<form class="form-search">
<div class="input-append">
<input type="text" ng-model="search"
placeholder="Search user"
class="form-control" >
</div>
<ul class="example-animate-container">
<li class="animate-repeat"
ng-repeat="user in users | filter:search">
<a href="#"> {{user}} </a>
</li>
</ul>
</form>
</div>
</body>三、Js
var app = angular.module('myApp', ['ngAnimate']);
app.controller('myCtrl',['$scope',function($scope){
$scope.users = ['Fabio', 'Leonardo', 'Thomas', 'Gabriele', 'Fabrizio', 'John', 'Luis', 'Kate', 'Max'];
}]);
app.animation('.animate-repeat',function(){
return {
enter:function(element,done){
$(element).css({opacity:0});
jQuery(element).animate({
opacity: 1,
height:40
},300, done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
leave:function(element,done){
jQuery(element).animate({
opacity:0,
height:0
},300, done);
return function(isCancelled) {
if(isCancelled) {
jQuery(element).stop();
}
}
},
move:function(element,done){
//do not used
}
};
});四、注意事项
1、Angular的版本与Angular-animate的版本要一致，不然会报错；
2、一个App内不能声名相同名字的Controller；
3、上面例子只是ng-repeat的版本，其实还有其他版本；
4、ng-repeat只用到了Animate声明Js版本中的enter,leave和move三个方法；
5、有时候只控制高度就可以达到效果；
五、官方链接
结构-行为-样式-angularJs ngAnimate(Js实现)的更多相关文章
- 结构-行为-样式-angularJs 指令实现滚动文字
最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...
- 结构-行为-样式-angularJs笔记
0.关于Ng-app 通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...
- 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽
新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...
- 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题
最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...
- 基于 Angularjs&Node.js 云编辑器架构设计及开发实践
基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...
- UI标签库的话题：JEECG智能开发平台 BaseTag(样式表和JS标签的引入)
UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 演示样例 <t:base type="jquer ...
- AngularJS + Node.js + MongoDB开发
AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...
- TP引用样式表和js文件及验证码
TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...
- CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器
CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...
随机推荐
- Ajax跨域原理及JQuery中的实现
浅析Ajax跨域原理及JQuery中的实现分析 AJAX 的出现使得网页可以通过在后台与服务器进行少量数据交换,实现网页的局部刷新.但是出于安全的考虑,ajax不允许跨域通信.如果尝试从不同的域请 ...
- SQL点滴19—T-SQL中的透视和逆透视
原文:SQL点滴19-T-SQL中的透视和逆透视 透视 今天抽一点时间来看看透视和逆透视语句,简单的说就是行列转换.假设一个销售表中存放着产品号,产品折扣,产品价格三个列,每一种产品号可能有多种折扣, ...
- Lua 5.2 Reference Manual
Lua 5.2 Reference Manual.pdf
- 设置Cookie，登录记住用户登录信息，获取用户登录过得信息
function setCookie(name,value) { var Days = 30; var exp = new Date(); exp.setTime(exp.getTime() + Da ...
- Servlet配置load-on-startup
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http:// ...
- Java设置环境变量
客上转过来的. 非常多人写了非常久java代码.还不知道环境变量是怎么一回事.科普一下. 一.java设置环境变量 - 精简版 1.右键打开我的电脑->属性->高级->环境变量 ...
- ps教程--折纸效果
原文:http://www.fevte.com/tutorial-16947-1.html
- XLSTransformer生成excel一个简单的演示示例文件
项目结构图: 在这些项目中使用jar.可以http://www.findjar.com/index.x下载 ExcelUtil类源代码: package util; import java.io.IO ...
- Oracle索引——位图索引
1.语法create bitmap index index_name on 表名(字段);2.举个例子你就能明白了:如有表 test(id,name,address)数据(1,张三,大连)(2,李四, ...
- unique_ptr简谈
看到文章里的同学留言说到unique_ptr,这两天看了一下cplusplus提供的reference才知道这个东西是c++11的新特性,对c++11的新特性不是很了解,花时间了解了下unique_p ...