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使用