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>标签多了点东西
随机推荐
- SVN部署和使用
一.SVN介绍 svn(subversion)是近年来崛起的版本管理工具,是cvs的接班人.目前,绝大多数开源软件都使用svn作为代码版本管理软件. 二.服务器端和客户端 1.服务器端软件Subver ...
- 解决EBS中JAR包冲突的问题
同事解决的,摘抄上来备用. 问题描述:在OAF里调用ESB的服务报错如下: Error Page Exception Details. oracle.apps.fnd.framework.O ...
- 第3月30天 UIImage imageWithContentsOfFile卡顿 Can't add self as subview MPMoviePlayerControlle rcrash
1. UIImage imageWithContentsOfFile卡顿 [[UIImage alloc] initWithContentsOfFile 卡顿 2.uitableview scroll ...
- new Array(n) 的坑 密集数组和稀疏数组
今天写Vue时遇到一个奇怪问题,需要监控网页上的input 是否都有值 // var blanks = new Array(number); // blanks的监控属性 var emptyNumbe ...
- Yii2 ActiveRecord save失败
当给AR写beforeSave方法时,注意返回true还是false.如果没有返回值,或者返回false,那么就不会存入数据库.如下 晚上写代码的时候beforeSave忘了返回true,导致无法存入 ...
- Javascript模块化编程(一):模块的写法
Javascript模块化编程(一):模块的写法 作者: 阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/10/javascript_module.html ...
- 将Vuforia程序发布到Windows10系统的基本流程
最新博客地址已转到: http://blog.csdn.net/zzlyw?viewmode=contents ------------------------------------------ ...
- 详解SpringMVC中GET请求
GET请求概述 GET请求,请求的数据会附加在URL之后,以?分割URL和传输数据,多个参数用&连接.URL的编码格式采用的是ASCII编码,而不是uniclde,所有的非ASCII字符都要编 ...
- 终于遇到app不兼容,你遇到了么?
题记: 如果支付宝和QQ不兼容,要二选一,你会怎么选择? 首先了解一下背景: 笔者最近发现,微众银行的app升级到1.7.4, 而患有轻度强迫症的人是迫不及待的点了升级. 第一次,居然安装包安装不成功 ...
- 三妹,我拆了你的本-- Day One(大图赏)
从垃圾箱中捡到了三妹的笔记本,虽然显卡已烧,硬盘和内存已被掳走,但依旧很高兴的说,因为我的目的是要拆了它. 这是我的第一次,所以本文的内容完全是新手猎奇,高手勿喷~ 步骤1:拆掉塑料外壳 不要忘了硬盘 ...