ng-repeat 动画

根据列表元素的插入与移除，触发相应的代码添加动画

<!doctype html>

<html lang="en" ng-app="myApp">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-3.1.1.min.js"></script>

    <script src="angular.min.js"></script>

    <script src="angular-animate.min.js"></script>

    <style>

        li

        {

            height:45px;

        }

        .even

        {

            background:red;

        }

        .odd

        {

            background:green;

        }

    </style>

</head>

<body>

<div ng-controller="myController">

    <!--

        根据 model 输入的值过滤数组元素

        ng-repeat="v in arr|filter:name track by $index"

    -->

    <input type="text" ng-model="name"/>

    <ul>

        <li

                ng-repeat="v in arr|filter:name track by $index "

                class="li"

                ng-class-even="'even'"

                ng-class-odd="'odd'"

                >{{v}}

        </li>

    </ul>

</div>

<script>

    angular.module("myApp",["ngAnimate"])

            .controller("myController",function($scope){

                $scope.arr = [

                        "sgssb","afewae","yjgyj","ioil","fefe","jf,jtuy,","seven","eight","nine","ten",

                    "a","b","c","c","d","f","s","a","5fsg","sgsfgsg"

                ];

            })

            //使用动画需要一个类名

            .animation(".li",function(){

                return{

                    //一项被插入到列表时触发

                    enter:function(element,done){

                        //定义动画

                        $(element).animate({"height":"45px","opacity":"1"},300,function(){

                            done();

                        })

                    },

                    //一项从列表中被移除时触发

                    leave:function(element,done){

                        //定义动画

                        $(element).animate({"height":"0","opacity":"0"},300,function(){

                            done();

                        })

                    }

                }

            })

</script>

</body>

</html>

Angular动画（ng-repeat）的更多相关文章

  1. Angular动画

    Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...

  2. angular动画知识点以及代码样例

    原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...

  3. Angular 动画

    1.先做一个简单的例子  =>  定义一个div 从open渐变成closed ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数 ...

  4. Angular动画——路由动画及高阶动画函数

    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...

  5. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  6. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  7. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  8. Angular动画（ng-class）

    ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...

  9. Part 6 AngularJS ng repeat directive

    ng-repeat is similar to foreach loop in C#. Let us understand this with an example. Here is what we ...

随机推荐

  1. (转载)GDI+双缓冲

    双缓冲在GDI+里可以有效的提高描画效率.改善显示的质量. 下面的代码是一个最简单的双缓冲的模板.可以根据需要,做简单的修改即可. Bitmap CacheImage( [Width], [Heigh ...

  2. EBS提交请求出现REP-3000错误

    在AIX上利用并发请求提交报表的時候,出现如下错误:REP-3000: Internal error starting Oracle Toolkit.这是因为Report Server需要X-Wind ...

  3. 百度CDN

    地址如下: http://cdn.code.baidu.com/

  4. iOS如何彻底避免数组越界

    我们先来看看有可能会出现的数组越界Crash的地方: ? 1 2 3 4 5 6 7 - (void)tableView:(UITableView *)tableView didSelectRowAt ...

  5. 再说表单验证，在Web Api中使用ModelState进行接口参数验证

    写在前面 上篇文章中说到了表单验证的问题,然后尝试了一下用扩展方法实现链式编程,评论区大家讨论的非常激烈也推荐了一些很强大的验证插件.其中一位园友提到了说可以使用MVC的ModelState,因为之前 ...

  6. thinkphp判断是否登录

    自己写一个BasicController继承了官方的Controller,将判断登录的代码放在BasicController中,然后让其他自己编写的Controller都继承BasicControll ...

  7. Lr IP欺骗设置

    IP欺骗设置IP工具:IP Wizard 开启IP欺骗时会关闭DHCP(也就是关闭IP自动获取 更改为手动设置IP) 注:添加IP欺骗,和释放IP,都要重启机器后才会生效,IP Wizard要管理员身 ...

  8. php 路径

    //魔术变量,获取当前文件的绝对路径 echo "__FILE__: ========> ".__FILE__; echo '<br/>'; //魔术变量,获取当 ...

  9. Go简介

    Go是Google开发的一种编译型,並發型,并具有垃圾回收功能的编程语言. 罗伯特·格瑞史莫(Robert Griesemer),罗勃·派克(Rob Pike)及肯·汤普逊于2007年9月开始设计Go ...

  10. 使用KRPano资源分析工具强力加密KRPano项目（XML防破解，切片图保护，JS反调试）

    软件交流群:571171251(软件免费版本在群内提供) krpano技术交流群:551278936(软件免费版本在群内提供) 最新博客地址:blog.turenlong.com 限时下载地址:htt ...