一.緣由

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

      在項目開發(fā)過程中，很多頁面過渡需要用到動畫，簡單的show/hide過渡太生硬，對用戶不友好，并且移動端大多都是采用slide效果，此文主要是為zepto拓展slide動畫。

 

二.發(fā)現(xiàn)

      從zepto的在線文檔上可以發(fā)現(xiàn)一個發(fā)布在github上的動畫模塊，但是缺少slide效果，度娘上找了找，相關(guān)的極少，只發(fā)現(xiàn)了一個slideDown的例子，所以我們就照著這個例子寫了幾個常用的slide動畫。

 

三.行動

       首先，我們把動畫方向分為上下滑動和左右滑動，滑動形式分為元素自身的伸縮和相對位移 

       1.左右slide

       這應(yīng)該是最常用的一個效果

       貼上代碼：注釋部分二選一， slideLeft 和 slideRight 的滑動形式必須設(shè)為一致，不然無法工作

 View Code

    左右位移效果圖：                                                                                                         

         

    左右伸縮效果圖：

    

 

   2.上下slide

      貼上代碼：注釋部分二選一， slideUp 和 slideDown 的滑動形式必須設(shè)為一致，不然無法工作

 View Code

     上下位移效果圖：                                                                                                          

          

    上下伸縮效果圖：

     

 

四.結(jié)束

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

      順便附上整個動畫模塊，但在這之前必須先添加上animate模塊，因為zepto本身是不具有animate事件的，許多模塊都是單獨分出去的，可以參考這里，代碼我們可以從github中的animate模塊復(fù)制進去。