• 声明
  • 页面
  • 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官方Api

结构-行为-样式-angularJs ngAnimate(Js实现)的更多相关文章

  1. 结构-行为-样式-angularJs 指令实现滚动文字

    最近在做XX项目的大屏展示页面,有一个表格需要用到这个滚动效果,于是就写了个指令,记录下,共同学习. Html代码: <td word-roll tword="item"&g ...

  2. 结构-行为-样式-angularJs笔记

    0.关于Ng-app   通过ngApp指令来引导Angularjs应用是一种简洁的方式 ,适合大多数情况.在高级开发中,例如使用脚本装载应用,您也可以使用Bootstrap手动引导AngularJs ...

  3. 结构-行为-样式 - Angularjs 环境下Ztree结合JqueryUI实现拖拽

    新的项目中有一个需求是要求客户标签可以自定义,于是就想到了客户体验,让客户自己拖拽标签进行组合查询.但是理想很丰满,现实很骨感.一开始就遇到了问题,各个插件之间的结合问题,折腾一翻之后终于实现了这个功 ...

  4. 结构-行为-样式-angularJs 指令解决IE下无PlaceHolder的问题

    最近项目开发的时候遇到一个头疼的问题,在测试IE兼容性的时候,发现placeholder在IE下无效.查网上说也是有各种解决方案,但是都不是我想要的,于是决定自己写一个.思路:placeHolder是 ...

  5. 基于 Angularjs&Node.js 云编辑器架构设计及开发实践

    基于 Angularjs&Node.js 云编辑器架构设计及开发实践 一.产品背景 二.总体架构 1. 前端架构 a.前端层次 b.核心基础模块设计 c.业务模块设计 2. Node.js端设 ...

  6. UI标签库的话题：JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 演示样例 <t:base type="jquer ...

  7. AngularJS + Node.js + MongoDB开发

    AngularJS + Node.js + MongoDB开发的基于位置的通讯录(by vczero) 一.闲扯 有一天班长说了,同学们希望我开发一个可以共享位置的通讯录,于是自己简单设计了下功能.包 ...

  8. TP引用样式表和js文件及验证码

    TP引用样式表和js文件及验证码 引入样式表和js文件 <script src="__PUBLIC__/bootstrap/js/jquery-1.11.2.min.js"& ...

  9. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

随机推荐

  1. [转载]C#播放流媒体的几种方法

    做视频开发要学的东西真多,不知道如何入门,乱打乱撞,慢慢摸索吧! 首先搭建Windows Meida Server ,方法很简单,试试就会.在这里需要声明的是,这几种方法 都可以播放 本地视频.并且基 ...

  2. 设计模式之职责链模式(Chain of Responsibility)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  3. 【工作笔记二】ASP.NET MVC框架下使用MVVM模式

    ASP.NET MVC框架下使用MVVM模式 原文:http://www.cnblogs.com/n-pei/archive/2011/07/21/2113022.html 对于asp.net mvc ...

  4. RMAN duplicate from active 时遭遇 ORA-17627 ORA-12154

    最近在从活动数据库进行异机克隆时碰到了ORA-17629,ORA-17627,ORA-12154的错误,起初以为是一个Bug呢.Oracle Bug着实太多了,已经成了习惯性思维了.汗!错误提示是无法 ...

  5. OpenGL Development Cookbook chapter7部分翻译

    让我们通过以下简单步骤开始我们的配方: 1.通过读取外部的体数据文件,并通过该加载数据集数据转换成一个OpenGL纹理.也使硬件的mipmap生成.通常情况下,从使用一个横截面中获得的体积数据文件存储 ...

  6. C#的Task和Java的Future

    C#的Task和Java的Future 自从项目中语言换成Java后就很久没有看C#了,但说实话我是身在曹营心在汉啊.早就知道.NET4.5新增了async和await但一直没有用过,今天看到这篇文章 ...

  7. C#里CheckListBox的全选

    for (int i = 0; i < chkLSelect.Items.Count; i++)            {                if (chkCheck.Checked ...

  8. C#版考题

    某软件大赛C#版考题整理——[单选题]   一.单选题(10小题共20.0分) 1. 以下JavaScript代码的正确输出结果是:(). 1 2 3 4 5 6 7 8 9 <script t ...

  9. sql 数据库的备份还原问题

    今天工作中犯了一个严重的错误,就是在sql中写了一个update语句,还没写条件呢,结果误按了F5,唉,太佩服自己啦...这个脑子怎么不管用了呢?? 唉不说了,我在网上翻来覆去的找资料,最终想是不是可 ...

  10. GDB-Darwin-Extentions