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 ...
随机推荐
- Linux系统启动过程
1. 从BIOS到KERNEL BIOS自检->MBR(GRUB)->KERNEL->KERNEL自解压->内核初始化->内核启动 BIOS自检 当电脑开机的时候,电脑会 ...
- MFC去掉标题栏
在初始化的时候加入以下函数 //去掉标题栏 ModifyStyle(WS_CAPTION, NULL, SWP_DRAWFRAME );
- (原创)微信支付SDK调用的核心代码与分析(基于Android)
先上代码,后面会分析 String url = "http://wxpay.weixin.qq.com/pub_v2/app/app_pay.php?plat=android"; ...
- javascript中的变量
变量 var x = 0; 这是声明了一个变量的实例,我们可以把变量看做存储数据的容器.数据的类型可以是任何数据类型. 一变量的命名 声明一个变量需注意: ①:变量可以以字母或者$._开头(后两 ...
- 各种开源Android 系统定制
MIUI MIUI是由小米科技开发的Android装置系统.2016年2月24日,MIUI全球用户超过1.7亿.部分开源代码托管在GitHub 官网 国际网站 http://miuiandroid.c ...
- mysql 查询表结构
use information_schema; select column_name, column_type, data_type, is_nullable, column_comment from ...
- maven集成tomcat插件以及乱码解决
Maven已经是Java的项目管理标配,如何在JavaEE开发使用Maven调用Web应用,是很多同学关心的问题.本文将介绍,Maven如何介绍Tomcat插件. Maven Tomcat插件现在主要 ...
- dvd开发小程序
package dvdManager8; import java.util.Scanner; public class DvdSystem8 { static String[][] dvd = new ...
- CDQ学习笔记
CDQ三维偏序 给出n个点(x,y,z) 每个点求出x'<=x,y'<=x,z'<=x的点(x',y',z')有多少个 第一维 快排 第二维 CDQ 第三维 树状数组 CDQ 先按x ...
- Linux /proc/$pid部分内容详解
auxv /proc/[pid]/auxv包含传递给进程的ELF解释器信息,格式是每一项都是一个unsigned long长度的ID加上一个unsigned long长度的值.最后一项以连续的两个0x ...