自己动手丰衣足食，为Zepto添加Slide动画效果

一.缘由

      公司的移动端项目，采用zepto为主要框架，但是zepto毕竟是精简版的jquery，体积小了，功能自然没有这么强大，特别是动画和选择器这两块，需要我们自己去拓展。

      在项目开发过程中，很多页面过渡需要用到动画，简单的show/hide过渡太生硬，对用户不友好，并且移动端大多都是采用slide效果，此文主要是为zepto拓展slide动画。

 

二.发现

      从zepto的在线文档上可以发现一个发布在github上的动画模块，但是缺少slide效果，度娘上找了找，相关的极少，只发现了一个slideDown的例子，所以我们就照着这个例子写了几个常用的slide动画。

 

三.行动

       首先，我们把动画方向分为上下滑动和左右滑动，滑动形式分为元素自身的伸缩和相对位移 

       1.左右slide

       这应该是最常用的一个效果

       贴上代码：注释部分二选一， slideLeft 和 slideRight 的滑动形式必须设为一致，不然无法工作

       $.fn.slideRight = function (speed, callback) {
            //获取元素position
            var position = this.css('position');
            this.show().css({
                position: 'absolute',
                visibility: 'hidden'
            });
            $('html,body').css({
                overflow: 'hidden',
                height: '100%'
            });
            //获取元素宽度
            var width = this.width() === 0 ? $(window).width() : this.width();

            //-------通过伸缩元素宽度实现动画-------
            //return this.css({
            //    top: $(window).scrollTop(),
            //    width: 0,
            //    position: position,
            //    visibility: 'visible',
            //    overflow: 'auto'
            //}).animate({ width: width }, speed, null, callback);

            //-------通过移动元素相对位置实现动画-------
            return this.css({
                top: $(window).scrollTop(),
                left: -width,
                position: position,
                visibility: 'visible',
                overflow: 'auto',
            }).animate({ left: 0 }, speed, null, callback);
        };

        $.fn.slideLeft = function (speed, callback) {
            //获取元素position
            var position = this.css('position');
            this.show().css({
                position: 'absolute',
                visibility: 'hidden'
            });
            $('html,body').css({
                overflow: '',
                height: ''
            });
            //获取元素宽度
            var width = this.width();
            //-------通过伸缩元素宽度实现动画-------
            //return this.css({
            //    top: 0,
            //    position: position,
            //    visibility: 'visible',
            //    overflow: 'auto'
            //}).animate({ width: 0 }, speed, null, callback);

            //-------通过移动元素相对位置实现动画-------
            return this.css({
                top: 0,
                position: position,
                visibility: 'visible',
                overflow: 'auto'
            }).animate({ left: -width }, speed, null, callback);
        };

View Code