结构-行为-样式-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> ...
随机推荐
- PHP 4:从Login进一步看到的
原文:PHP 4:从Login进一步看到的 我们已经在PHP 3:从Login界面谈PHP标记谈到了PHP标记,不过其页面代码有一句 require_once('bookmark_fns.php'); ...
- Java多线程之进程和线程
在并发编程中有两个基本的概率就是进程和线程.在Java编程中并发编程更多的是关注线程.但是进程也是很重要的. 一个计算机一般会有很多活跃的进程和线程.有一点是没有疑问的在单核系统中,任何时候实际上都是 ...
- hdu - 4979 - A simple math problem.（可反复覆盖DLX + 打表）
题意:一种彩票共同拥有 N 个号码,每注包括 M 个号码,假设开出来的 M 个号码中与自己买的注有 R 个以上的同样号码,则中二等奖,问要保证中二等奖至少要买多少注(1<=R<=M< ...
- jquery扩展方法案例
-----------------扩展方法: $.extend({ "max": function (a, b) { if (a > b) return a; }, &quo ...
- [转]当图片源大小大于ImageView大小时的处理方式（缩放）
转一篇当图片源大小大于ImageView大小定死时的处理方法,但不适用于图片大小小于ImageView时的情况,因为inSampleSize不能<1, 谁有特别好的放大的解决方案,除了设置Ima ...
- Oracle琐碎笔记2
备注:以下所有操作均在sqlplus中执行. 开始前输入:spool c:\jiyi.txt;结束后输入:spool off;就会记忆操作的所有记录save c:\sql.sql;保存sql脚本可以使 ...
- ExtJs之表格控件入门
extjs的表格功能非常强大,包括了排序,缓存,拖动,隐藏某一列,自动显示行号,列汇总,单元格编辑等实用功能.表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid ...
- IOS UI 第十篇: UITABLEVIEW
uitableView review yesterday’s knowledge : folding group : ------------------------------- ...
- web代理进行跨域访问
通过web代理进行跨域访问,http请求返回超时的问题定位 [现象] 在ajax通过web代理跨域访问时,http第一次登陆时正常,但是第二次再下发其他命令的时候总是返回 java.net.Soc ...
- 设计模式18---设计模式之策略模式（Strategy）（行为型）
1.场景模拟 简单的报价管理系统: 对于普通用户和新用户报全价 对于老客户统一折扣5% 对于大客户统一折扣10% 2.不用模式的解决方案 package demo16.strategy.example ...