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 ...
随机推荐
- Facebook的Web开发三板斧：React.js、Relay和GraphQL
2015-02-26 孙镜涛 InfoQ Eric Florenzano最近在自己的博客上发表了一篇题为<Facebook教我们如何构建网站>的文章,他认为软件开发有些时候需要比较大的跨 ...
- word20161217
p-node / p 节点 package / 程序包 packet / 数据包 packet assembler/disassembler, PAD / 分组拆装器 packet header / ...
- vmare centos 6.8 minimal 无法上网
主机:win7 工具:vmare 11.0.0 系统:http://mirrors.163.com/centos/6.8/isos/x86_64/CentOS-6.8-x86_64-minimal.i ...
- html5 canvas-绘制贝塞尔曲线
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移居 GitHub
博客很久没能更新了,很多代码也从博客园逐渐转移到 GitHub,欢迎新老用户光顾: https://github.com/kedebug 个人博客:http://kedebug.me/
- Latex中插入C语言代码
Latex是一个文本排版的语言,能排版出各种我们想要的效果.而且用代码排版的优点是易于修改板式,因此在文本内容的排版时,Latex应用十分广泛. 当我们需要在Latex中插入代码时,就需要用到 \us ...
- Spring学习（一）
1.既然是学习Spring,我们首先要搞清楚Spring是什么? Spring是分层的.JavaSE/EE一站式的.轻量级的开源框架. 2.Spring的核心 百度百科:Spring是基于IOC和AO ...
- Linux中杀不死的进程
前段时间,一哥们,去杀Linux服务器的进程,发现kill命令失灵了,怎么杀都杀不死. 然后上网查了下资料,原来是要被杀的进程,成为了僵尸进程. 僵尸进程的查看方法: 利用命令ps,可以看到有标记为Z ...
- json_decode返回NULL
最近在调用某公司的API时,将对方返回的数据,使用PHP的json_decode函数解析,但是返回NULL,最终排查为对方传送来的json格式有误 打印$_REQUEST,数据结构大致如下: arra ...
- js的类型及调试下的辨识
<script> var s1 = '11'; var s2 = 11; var s3 = true; console.log("我的类型是"+typeof(s1)+& ...