Angular动画(ng-class)
ng-class 同 触发的是
addClass//当给元素添加一个class时触发,
removeClass //把元素的class移除时触发
<ul ng-style="ulWidth" class="chefMaxImgul" ng-class="{next:chefNext,prev:chefPrev}">
<!-- 第一屏 -->
<li class="chefMaxImgOne" chef-imgone></li>
<!-- 第二屏-->
<li class="chefMaxImgTwo" chef-imgtwo></li>
<!-- 第三屏-->
<li class="chefMaxImgThree" chef-imgthree></li>
</ul>
app.animation(".chefMaxImgul",function(){
return {
addClass:function(ele,clsName,done){
var liW = $(ele).children("li").first().width();
if(clsName == "next"){
$(ele).animate({"left":-liW},500,function(){
$(ele).css({"left":"0px"});
$(ele).append($(ele).children("li").first());
})
}else{
done();
}
if(clsName == "prev"){
$(ele).css({"left":-liW});
$(ele).prepend($(ele).children("li").last());
$(ele).animate({"left":0},500);
}else{
done();
}
}
}
})
只要控制元素的class什么时候添加和移除就可以触发相对应的动画函数
这个要陪合jquery使用
Angular动画(ng-class)的更多相关文章
- Angular动画
Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...
- angular动画知识点以及代码样例
原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...
- Angular动画(ng-repeat)
ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...
- 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 Error: [ng:areq]
在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西
随机推荐
- 用.htaccess文件实现URL重写
注:第一部分来自 http://www.cnblogs.com/wangkongming/archive/2012/11/13/2768251.html 这位博主的个人网站简洁 还有诗歌 ...
- 我们为什么要看《超实用的Node.JS代码段》
不知道自己Node.JS水平如何?看这张图 如果一半以上的你都不会,必须看这本书,一线工程师用代码和功能页面来告诉你每一个技巧点. 都会一点,但不知道如何检验自己,看看本书提供的面试题: 1. ...
- 转VS2010解决方案转换到VS2008
原文链接地址:http://www.codeproject.com/Tips/80953/Converting-VS2010-Solution-to-VS2008 如果你使用VS2010的任何版本 ...
- github with msysgit:配置SSH Key
Step 1: Check for SSH keys First, we need to check for existing ssh keys on your computer. Open up G ...
- 数据结构 浙大MOOC 笔记二 线性结构
线性表及其表现 第二章的内容是关于三种最基本的数据结构 结合<DDSA>第三章 表.栈和队列做一个总结 首先简单说明一下各个数据结构的特点: 数组:连续存储,遍历快且方便,长度固定,缺点是 ...
- 第三条:用私有构造器或者枚举类型强化Singleton属性
1.使用单元素的枚举类型 public enum Singleton implements Serializable { INSTANCE; private String field; public ...
- Android插件化框架研究-DroidPlugin
直接贴上我做的ppt.
- Libvlc API 简单说明 [转]
Libvlc API 简单说明 原文来自http://www.xuebuyuan.com/1519616.html libvlc_instance_t* libvlc_new(int argc, co ...
- 最新Mac OS X 10.12.1 安装cocoapods及使用详解
cocoapods官网:https://cocoapods.org 一.什么是CocoaPods 每种语言发展到一个阶段,就会出现相应的依赖管理工具,例如 Java 语言的 Maven,nodejs ...
- iOS-最全的App上架教程
App上架教程 心情有没有好一点 在上架App之前想要 真机测试的同学 请查看iOS- 最全的真机测试教程 里面包含怎么让多台电脑同时 上架App和同时真机调试.P12文件的使用详解 因为最近更新了X ...