Angular动画（ng-repeat）
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）的更多相关文章
- Angular动画
Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...
- angular动画知识点以及代码样例
原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...
- Angular 动画
1.先做一个简单的例子 => 定义一个div 从open渐变成closed ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数 ...
- Angular动画——路由动画及高阶动画函数
一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...
- Angular: 执行ng lint后如何快速修改错误
当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...
- ANGULAR 使用 ng build --prod 编译报内存错误的解决办法
如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...
- Angular CLI ng常用指令整理
一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...
- Angular动画（ng-class）
ng-class 同 触发的是 addClass//当给元素添加一个class时触发, removeClass //把元素的class移除时触发 <ul ng-style="ulWid ...
- 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 ...
随机推荐
- HTML 内容居中方式总结
在HTML网页排版经常会用到关于对其方式的情况,水平居中和垂直居中.特别是水平居中,并不是一个简单的text-align就可以解决所有的情况. 开始之前普及一点HTML知识,目标很明显,不同的页面结构 ...
- 【bzoj1231】[Usaco2008 Nov]mixup2 混乱的奶牛
题目描述 混乱的奶牛[Don Piele, 2007]Farmer John的N(4 <= N <= 16)头奶牛中的每一头都有一个唯一的编号S_i (1 <= S_i <= ...
- matlab绘图基础
matlab绘制条形图并分组显示: a =[1 2 3] b =[4 5 6] >> d=[a;b] d = 1 2 3 4 5 6 >> bar(d,'group') 修改横 ...
- c coroutine
今天看了下云风c coroutine 代码 博客,发现 coroutine 实现原理其实还比较简单,就用户态栈切换,只需要几十行汇编,特别轻量级. 具体实现 1. 创建一个coroutine: 也就 ...
- shiro session计算timeout
/** * Determines if this session is expired. * * @return true if the specified session has expired, ...
- c++单链表基本功能
head_LinkNode.h /*单链表类的头文件*/#include<assert.h>#include"compare.h"typedef int status; ...
- bat命令总结
1.复制文件 copy cd.dll %windir%\system32 2.复制文件夹 /s 复制目录和子目录,除了空的. /e复制目录和子目录,包括空的. xcopy %dir%\template ...
- python之platform模块
python之platform模块 ^_^第三个模块从天而降喽!! 函数列表 platform.system() 获取操作系统类型,windows.linux等 platform.platform() ...
- Web应用性能优化思路
瓶颈是什么? 一条4车道的公路,运行非常顺畅,突然出了点事故,事故车导致某个地方只剩下1车道,然后就开始堵车,因为四辆车同时塞向一个车道里.把这个事故清除了,故障车拖走了,道路会开始恢复了通畅. 这个 ...
- 虚拟机出现“操作文件.PhysicalDrive1失败”的解决方法
今天打算利用U盘给虚拟机装系统做实验,中途遇到了"操作文件.PhysicalDrive1失败"的错误,试了网上的方法都没有成功,最后自己试了很久总算弄出来了.鉴于本人的基础水平有限 ...