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 ...
随机推荐
- Windows 8.1开发环境初始化
Windows 8.1 en 64bit 以管理员权限运行CMD,命令:POWERCFG -H OFF,删除hiberfil.sys
- nodeJS爬虫---慕课网
源代码一(爬取html源码) //引入http模块var http = require('http');//引入url地址var url = 'http://www.imooc.com/learn/2 ...
- setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式
<script type="text/javascript"> setInterval(function(){ var myDate = new Date(); var ...
- 教你怎么快速配置 React
导读 React 是一个构建用户界面的库,而它只是组成一个应用的一部分.应用还有其他的部分——风格.路由器.npm 模块.ES6 代码.捆绑和更多——这就是为什么使用它们的开发者不断流失的原因.这被称 ...
- Android的Intent.FLAG_ACTIVITY_CLEAR_TOP无效
转载:http://blog.csdn.net/u011361576/article/details/48626237 今天写代码遇到了一个问题: 当 B - A - B 跳转的时候,使用Intent ...
- 整理文件，翻出了以前作的ps稿 (^o^)c旦``
稍稍会那么一点PS,小意思
- Data Validate 之 Data Annotation
什么是Data Annotation ? 如何使用 ? 自定义Validate Attribute EF Db first中使用Data Annotation asp.net MVC中使用Data ...
- C语言小结
1.输入输出: char s; printf("Enter a string"); scanf("%s",&s); printf(''Hello,%s& ...
- Python: 利用Python进行数据分析 学习记录
-----15:18 2016/10/14----- 1. import numpy as np;import pandas as pd values = pd.Series(np.random.no ...
- 【linux】scp命令
scp的作用是在不同主机之间传输文件. 用法: scp user@host:/path1 path2 说明: 把远程主机host中path1的内容拷贝到当前主机的path2 user是远程主机登陆用户 ...