结构-行为-样式-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> ...
随机推荐
- Android单元测试Junit （一）
1.在eclips中建立一个Android工程,具体信息如下: 2.配置单元测试环境,打开AndroidManifest.xml,具体代码如下所示: <?xml version="1. ...
- Django小例子 – 模型数据的模板呈现
学习Django的这几天,学习过程还是很愉快的,django采用的MVC架构,学习曲线十分平缓,在深入学习之前,先简单的整理记录下django从数据库中获取数据并在模板中使用的方法.温故而知新 ^_^ ...
- C++在struct与class差异
在C++中,既能够用structkeyword进行类的定义,也能够用classkeyword进行类的定义,那么这两者究竟有什么差别呢? 唯一的一点差别是:struct和class的默认訪问权限不一样. ...
- 我的CSS 入门1
CSS(Cascading Style Sheets)级联样式表.我现在所知的,她的存在能够更好的管理多个HTML文件,或者是为了使得网页设计更为丰富多彩,“简单可依赖”. 如果你对HTML一无所知, ...
- SQL SERVER统计服务器所有的数据库（数据库文件）、表（表行数）、字段（各字段）等详细信息
原文:SQL SERVER统计服务器所有的数据库(数据库文件).表(表行数).字段(各字段)等详细信息 USE STAT GO SET NOCOUNT ON IF EXISTS(SELECT 1 FR ...
- C# 语言的多线程编程，完全是本科OS里的知识
基本知识,无参数Thread和带参数的Thread Thread类的参数就是参数指针,可以传入一个无参的函数. 如果要传入带参数的函数,先new一个ParameterizedThreadStart委托 ...
- Akka入门实例
Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...
- test maekdown 2
Package Control Messages Markdown Preview: Sublime Text 2/3 Markdown Preview ======================= ...
- [Usaco2008 Jan]Cow Contest奶牛的比赛[神奇的FLOYD]
Description FJ的N(1 <= N <= 100)头奶牛们最近参加了场程序设计竞赛:).在赛场上,奶牛们按1..N依次编号.每头奶牛的编程能力不尽相同,并且没有哪两头奶牛的水平 ...
- 高并发非自增ID如何设计？
博友们一起来讨论下高并发非自增ID如何设计? 底层是很重要的,我最近设计底层,通用底层. 我想跟大家谈论下这个话题: 如何在高并发环境下设计出一套好用的非自增ID的添加操作的解决方案?更新的操作我随机 ...