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);
        };

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模块复制进去。