zoukankan      html  css  js  c++  java
  • 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使用

  • 相关阅读:
    通信信号处理的一些基本常识
    欧拉公式
    css3圆角讲解
    css3投影讲解、投影
    css3变形讲解
    浏览器兼容问题
    css3渐变详解
    css中em与px
    복 경 에 갑 니 다 去北京
    我在北京:)
  • 原文地址:https://www.cnblogs.com/chefweb/p/6122103.html
Copyright © 2011-2022 走看看