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. 用Java来写常见的排序算法

    随着校招的临近 算法是校招中很重要的一个部分 总结了常见几种排序算法,各种算法的时间复杂度和空间复杂度大家也需要多了解下 package com.huwei.sort; /** * 各种排序算法 * ...

  2. 如何实现 javascript “同步”调用 app 代码

    在 App 混合开发中,app 层向 js 层提供接口有两种方式,一种是同步接口,一种一异步接口(不清楚什么是同步的请看这里的讨论).为了保证 web 流畅,大部分时候,我们应该使用异步接口,但是某些 ...

  3. IOS原生地图与高德地图

    原生地图 1.什么是LBS LBS: 基于位置的服务   Location Based Service 实际应用:大众点评,陌陌,微信,美团等需要用到地图或定位的App 2.定位方式 1.GPS定位  ...

  4. 利用xhsell登录到远程腾讯云服务器

    xshell连接管理腾讯云服务器图文教程 打开xshell点击文件新建会话框 linux服务器ssh管理软件XSHELL下载及安装图文教程 输入公网IP地址确认下一步 选中服务器连接 一次性接受,不储 ...

  5. poj 1737男人八题之一 orz ltc

    这是楼教主的男人八题之一.很高兴我能做八分之一的男人了. 题目大意:求有n个顶点的连通图有多少个. 解法: 1.  用总数减去不联通的图(网上说可以,我觉得时间悬) 2.    用动态规划(数学递推) ...

  6. nginx提示413 Request Entity Too Large解决方法

    ## 找到nginx.conf文件 一般在`/etc/nginx/`下 ## 在http {}内天加如下一行 client_max_body_size 8M; ## 重启nginx nginx -s ...

  7. [转]python 常用类库!

    Python学习 On this page... (hide) 1. 基本安装 2. Python文档 2.1 推荐资源站点 2.2 其他参考资料 2.3 代码示例 3. 常用工具 3.1 Pytho ...

  8. 卷积神经网络_(4)_caffe简介

    这里大致说一下caffe.caffe是伯里克利大学的贾杨清教授写的一个深度学习框架,使用C++编写的,但同时也提供python和matlab接口:组成部分主要有: (1)Blob:用来存储数据和梯度: ...

  9. 出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码)

    出售Illustrator脚本插件面板(包含面板源码,以及面板上所有的功能源码) 购买后可提供相应的小修改,以及教你使用往这个多列面里再加上按钮功能! 这套源码可作为工作使用,也可用为新手学习AI脚面 ...

  10. eclipse开发servlet,HttpServletRequest报红叉解决方案

    eclipse开发servlet,HttpServletRequest报红叉解决方案 今天突然间有兴致,想打一会代码,于是开发一个Servlet,代码和配置路径都没问题,HttpServlet居然报错 ...