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 ...
随机推荐
- JDK，JRE，JVM，三者的区别于联系？
万事开头难,从基础抓起! 下载JDK官网:http://www.oracle.com/technetwork/java/javase/downloads/index.html JDK:Java Dev ...
- 使用Open xml 操作Excel系列之一-读取Excel
一. 安装Open Xml SDK 从微软网站下载Open xml SDK,安装SDK. 二. 在项目中添加对DocumentFormat.OpenXml库的引用
- libvirt 网络手册（一）
如果选择网络类型 在一个专用的服务器上,虚拟机常常需要被从公网访问(也就是每个虚拟机都需要公网地址),这时就需要桥接网络,它使得每个虚拟机有自己的IPV4和IPV6地址.如果桥接不可用,可以创建一个R ...
- LINQ 函数的实战演练测试
1.首先定义一个图书类.专门存放图书的属性信息. 代码如下: //Book.cs using System; namespace LinqTest { public class Book { pu ...
- IIS GZip
优点:提高网页响应速度(静态压缩会占用一定的存储空间,但是速度快,而动态压缩不占用存储空间,但是占用CPU时间,而且压缩比不恒定.) 缺点:动态压缩会影响CPU性能. win7:设置: iis管理器- ...
- java--连接SQL数据库获取验证码
1.导入SQL相关的包: 可以下载:mysql-connector-java-5.1.39-bin.jar 将包导入到工程的方法:project(在工程名上点鼠标右键) -> Build Pat ...
- centos6u3 安装 celery 总结
耗时大概6小时. 执行 pip install celery 之后, 在 mac 上 celery 可以正常运行, 在 centos 6u3 上报错如下: Traceback (most recent ...
- ABAP 特性值取数 非BAPI方式
特性值在ausp,objnr 一般是客户号或是客户号拼接的,客户号加特征字段特征类别就可以取了
- python 3.5: TypeError: a bytes-like object is required, not 'str'
出现该错误往往是通过open()函数打开文本文件时,使用了'rb'属性,如:fileHandle=open(filename,'rb'),则此时是通过二进制方式打开文件的,所以在后面处理时如果使用了s ...
- 获取文本的编码类型（from logparse）
import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.F ...