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)的更多相关文章

  1. Angular动画

    Angular动画基于W3C的Web Animations标准.不在Angular Core中了. 组件里面定义一个或多个触发器trigger,每个触发器有一系列的状态和过渡效果来实现. 动画其实就是 ...

  2. angular动画知识点以及代码样例

    原文地址 https://www.jianshu.com/p/4400174072e2 大纲 1.angular动画的相关概念 2.angular动画的绑定方式 3.angular动画代码实例 1.a ...

  3. Angular动画(ng-repeat)

    ng-repeat 动画 根据列表元素的插入与移除,触发相应的代码添加动画 <!doctype html> <html lang="en" ng-app=&quo ...

  4. Angular 动画

    1.先做一个简单的例子  =>  定义一个div 从open渐变成closed ts:定义一个触发器 openClose,有两个状态 open 和 closed,均有对应的样式,再定义装换函数 ...

  5. Angular动画——路由动画及高阶动画函数

    一.路由动画 路由动画需要在host元数据中指定触发器.动画注意不要过多,否则适得其反. 内容优先,引导用户去注意到某个内容.动画只是辅助手段. 定义一个进场动画,一个离场动画. 因为进场动画和离场动 ...

  6. Angular: 执行ng lint后如何快速修改错误

    当我第一次被分配到“修正执行ng lint语句后的错误”这项任务前,我就被导师提前告知这是一个很无聊的任务,当我开始后,我发现其实有一些办法可以加快这个无聊单调的工作.接下来,我就分享一下我的经验. ...

  7. ANGULAR 使用 ng build --prod 编译报内存错误的解决办法

    如果你遇到如下的情况 <--- Last few GCs ---> [13724:0000020D39C660D0] 231298 ms: Mark-sweep 1356.3 (1433. ...

  8. Angular CLI ng常用指令整理

    一.组件创建 ng generate component heroes 二.运行项目 ng serve --open //--open 立即打开 三.创建指令 ng g directive my-ne ...

  9. angular Error: [ng:areq]

    在使用augularjs的时候,爆了个错误: 后来经过对比,原来是我的<html>标签多了点东西

随机推荐

  1. c++ 接口和抽象类

    其实对抽象类与接口的区别一直是搞不太清楚,最近正在学习<设计模式>,期间用到了很多c++多态的知识.这是才恍然发现,是应该整理下这方面的知识了.但在翻阅书本.上网查阅资料之际,发现有篇文章 ...

  2. nginx tomcat session丢失的问题

    nginx反向代理tomcat,出现seesion获取不到的问题. 网上搜索到的解决方案大多是集群tomcat共享session共享的问题,但我这个只有一台tomcat服务器,不涉及到服务器集群问题. ...

  3. Java性能调优之:idea变慢解决

    今天搬砖的时候遇到一个问题,idea总是卡死,完全无法愉快的玩耍.幸好机器是Linux系统的.于是通过以下方式解决了问题: 通过top命令,查看系统运行状态发现4个CPU中有1个CPU用户占用率为10 ...

  4. C#高级编程笔记 2016年10月26日 MVC入门 Controller

    1.MVC的定义:   Models: Classes that represent the data of the application  and that use validation logi ...

  5. HTML5 图片本地压缩上传插件「localResizeIMG」

    移动应用中用户往往需要上传照片,但是用户上传的照片尺寸通常很大,而手机的流量却很有限,所以在上传前对图像进行压缩是很有必要的. 原生应用可以直接对文件进行处理,网页应用就没有这个优势了.不过 canv ...

  6. 饿了么基于Vue2.0的通用组件开发之路(分享会记录)

    Element:一套通用组件库的开发之路 Element 是由饿了么UED设计.饿了么大前端开发的一套基于 Vue 2.0 的桌面端组件库.今天我们要分享的就是开发 Element 的一些心得. 官网 ...

  7. Sublime Text 2下搭建Python环境常见错误

    Sublime Text 2下搭建Python环境时,最容易出的错误就是Python环境配置错误,导致build(Ctrl+B)后没有任何反应. 关于Python编程环境的配置,网上很容易搜索到.先默 ...

  8. HTML页面如何判断是手机访问还是电脑访问

    可以通过js来判断访问设备,代码如下: <script type="text/javascript"> var system ={}; var p = navigato ...

  9. Gnome_Terminal

    快捷键 ctrl shift m 我自定义的快捷键,可以给终端命名 ctrl shift t 新建标签页,并且目录为当前目录 ctrl shift pageup 标签页往前移 ctrl shift p ...

  10. Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解

    Swing中弹出对话框的几种方式_JOptionPane.showMessageDialog等详解   在swing中,基于业务的考量,会有对话框来限制用户的行为及对用户的动作进行提示. Swing中 ...