结构-行为-样式-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> ...
随机推荐
- C#在outlook里创建一封邮件到草稿箱
原文:C#在outlook里创建一封邮件到草稿箱 1.引用Microsoft.Office.Interop.Outlook.dll 2. 实现代码 public static int SendToD ...
- Mysql基础之字符集与乱码
原文:Mysql基础之字符集与乱码 Mysql的字符集设置非常灵活 可以设置服务器默认字符集 数据库默认字符集 表默认字符集 列字符集 如果某一个级别没有指定字符集,则继承上一级. 以表声明utf8为 ...
- Android中那些权限
Permission Permission Permission Group Permission Tree Users Permission ACCESS_CHECKIN_PROPERTIES 允许 ...
- 在SQL Server中添加Linked Server 图解版
在开发中,经常需要一个SQL Server服务器去访问另一个服务器,微软提供了一种方式Linked Server 下面是配置流程: 1).打开Server Objects下 Linked Server ...
- 【AngularJS】 2.0 版本发布
[AngularJS] 2.0 版本发布 w5cValidator[AngularJS] 2.0 版本发布 w5cValidator 插件基于angular原有的表单验证,在原有的基础上扩展了一些 ...
- Bootstrap 网格系统
自版本 2.3.2 起,Bootstrap 提供了两种类型的网格,默认网格系统和流动网格系统.默认的网格系统是 940px 宽和 12 列.本文主要讲解第一种. 首先让我们看,怎么来应用默认网格系统 ...
- hadoop集群的搭建与配置（2）
对解压过后的文件进行从命名 把"/usr/hadoop"读权限分配给hadoop用户(非常重要) 配置完之后我们要创建一个tmp文件供以后的使用 然后对我们的hadoop进行配置文 ...
- c#实现Google账号登入授权(OAuth 2.0)并获取个人信息
c#实现Google账号登入授权(OAuth 2.0)并获取个人信息 此博主要介绍通过google 账号(gmail)实现登入,授权方式OAuth2.0,下面我们开始介绍. 1.去google官网 ...
- 次短路[SPFA]
Description 贝茜把家搬到了一个小农场,但她常常回到FJ的农场去拜访她的朋友.贝茜很喜欢路边的风景,不想那么快地结束她的旅途,于是她每次回农场,都会选择第二短的路径,而不象我们所习惯的那样, ...
- AngularJS的初始化
AngularJS的初始化 本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过 ...