一.緣由

      公司的移動端專案，採用zepto為主要框架，但是zepto畢竟是精簡版的jquery，體積小了，功能自然沒有這麼強大，特別是動畫和選擇器這兩塊，需要我們自己去拓展。

      在專案開發過程中，很多頁面過渡需要用到動畫，簡單的show/hide過渡太生硬，對使用者不友好，並且移動端大多都是採用slide效果，此文主要是為zepto拓展slide動畫。

二.發現

      從zepto的線上文件上可以發現一個釋出在github上的動畫模組，但是缺少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);
        };
 

2.上下slide

      貼上程式碼：註釋部分二選一， slideUp 和 slideDown 的滑動形式必須設為一致，不然無法工作

上下位移效果圖：                                                                                             

上下伸縮效果圖：

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

            //-------通過伸縮元素高度實現動畫-------
            //return this.css({
            //    position: position,
            //    visibility: 'visible',
            //    overflow: 'auto',
            //    height: 0
            //}).animate({ height: height, top: $(window).scrollTop() }, speed, null, callback);

            //-------通過移動元素相對位置實現動畫-------
            return this.css({
                top: -height,
                left: 0,
                position: position,
                visibility: 'visible',
                overflow: 'auto'
            }).animate({ top: $(window).scrollTop() }, speed, null, callback);
        };

        $.fn.slideUp = function (speed, callback) {
            //獲取元素position
            var position = this.css('position');
            this.show().css({
                position: 'absolute',
                visibility: 'auto'
            });
            $('html,body').css({
                overflow: '',
                height: ''
            });
            //獲取元素高度
            var height = this.height();
            //-------通過伸縮元素高度實現動畫-------
            //return this.css({
            //    position: position,
            //    visibility: 'visible',
            //    overflow: 'hidden',
            //    height: height
            //}).animate({ height: 0 }, speed, null, callback);

            //-------通過移動元素相對位置實現動畫-------
            return this.css({
                left: 0,
                position: position,
                visibility: 'visible',
                overflow: 'auto'
            }).animate({ top: -height }, speed, null, callback);
        };

四.結束

      這樣，我們在專案中就能愉快的使用動畫了。

      順便附上整個動畫模組，但在這之前必須先新增上animate模組，因為zepto本身是不具有animate事件的，許多模組都是單獨分出去的，可以參考這裡，程式碼我們可以從github中的animate模組複製進去。