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

最新推荐文章于 2020-02-03 15:52:57 发布
最新推荐文章于 2020-02-03 15:52:57 发布
阅读量85 收藏
点赞数
文章标签： javascript 移动开发 ViewUI
原文链接：http://www.cnblogs.com/simendancer/p/5982761.html
版权

一.缘由

      公司的移动端项目，采用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

    左右位移效果图：                                                                                                         

         

    左右伸缩效果图：

    

 

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

     上下位移效果图：                                                                                                          

          

    上下伸缩效果图：

     

 

四.结束

      这样，我们在项目中就能愉快的使用动画了。

      顺便附上整个动画模块，但在这之前必须先添加上animate模块，因为zepto本身是不具有animate事件的，许多模块都是单独分出去的，可以参考这里，代码我们可以从github中的animate模块复制进去。

    

    //animate模块
    ; (function ($, undefined) {
        var prefix = '', eventPrefix,
          vendors = { Webkit: 'webkit', Moz: '', O: 'o' },
          testEl = document.createElement('div'),
          supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
          transform,
          transitionProperty, transitionDuration, transitionTiming, transitionDelay,
          animationName, animationDuration, animationTiming, animationDelay,
          cssReset = {}

        function dasherize(str) { return str.replace(/([A-Z])/g, '-$1').toLowerCase() }
        function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() }

        if (testEl.style.transform === undefined) $.each(vendors, function (vendor, event) {
            if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
                prefix = '-' + vendor.toLowerCase() + '-'
                eventPrefix = event
                return false
            }
        })

        transform = prefix + 'transform'
        cssReset[transitionProperty = prefix + 'transition-property'] =
        cssReset[transitionDuration = prefix + 'transition-duration'] =
        cssReset[transitionDelay = prefix + 'transition-delay'] =
        cssReset[transitionTiming = prefix + 'transition-timing-function'] =
        cssReset[animationName = prefix + 'animation-name'] =
        cssReset[animationDuration = prefix + 'animation-duration'] =
        cssReset[animationDelay = prefix + 'animation-delay'] =
        cssReset[animationTiming = prefix + 'animation-timing-function'] = ''

        $.fx = {
            off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
            speeds: { _default: 400, fast: 200, slow: 600 },
            cssPrefix: prefix,
            transitionEnd: normalizeEvent('TransitionEnd'),
            animationEnd: normalizeEvent('AnimationEnd')
        }

        $.fn.animate = function (properties, duration, ease, callback, delay) {
            if ($.isFunction(duration))
                callback = duration, ease = undefined, duration = undefined
            if ($.isFunction(ease))
                callback = ease, ease = undefined
            if ($.isPlainObject(duration))
                ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration
            if (duration) duration = (typeof duration == 'number' ? duration :
                            ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000
            if (delay) delay = parseFloat(delay) / 1000
            return this.anim(properties, duration, ease, callback, delay)
        }

        $.fn.anim = function (properties, duration, ease, callback, delay) {
            var key, cssValues = {}, cssProperties, transforms = '',
                that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
                fired = false

            if (duration === undefined) duration = $.fx.speeds._default / 1000
            if (delay === undefined) delay = 0
            if ($.fx.off) duration = 0

            if (typeof properties == 'string') {
                // keyframe animation
                cssValues[animationName] = properties
                cssValues[animationDuration] = duration + 's'
                cssValues[animationDelay] = delay + 's'
                cssValues[animationTiming] = (ease || 'linear')
                endEvent = $.fx.animationEnd
            } else {
                cssProperties = []
                // CSS transitions
                for (key in properties)
                    if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
                    else cssValues[key] = properties[key], cssProperties.push(dasherize(key))

                if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)
                if (duration > 0 && typeof properties === 'object') {
                    cssValues[transitionProperty] = cssProperties.join(', ')
                    cssValues[transitionDuration] = duration + 's'
                    cssValues[transitionDelay] = delay + 's'
                    cssValues[transitionTiming] = (ease || 'linear')
                }
            }

            wrappedCallback = function (event) {
                if (typeof event !== 'undefined') {
                    if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
                    $(event.target).unbind(endEvent, wrappedCallback)
                } else
                    $(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout

                fired = true
                $(this).css(cssReset)
                callback && callback.call(this)
            }
            if (duration > 0) {
                this.bind(endEvent, wrappedCallback)
                // transitionEnd is not always firing on older Android phones
                // so make sure it gets fired
                setTimeout(function () {
                    if (fired) return
                    wrappedCallback.call(that)
                }, ((duration + delay) * 1000) + 25)
            }

            // trigger page reflow so new elements can animate
            this.size() && this.get(0).clientLeft

            this.css(cssValues)

            if (duration <= 0) setTimeout(function () {
                that.each(function () { wrappedCallback.call(this) })
            }, 0)

            return this
        }

        testEl = null
    })(Zepto)
    //动画效果模块
    ; (function ($, undefined) {
        var document = window.document, docElem = document.documentElement,
          origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle

        function anim(el, speed, opacity, scale, callback) {
            if (typeof speed == 'function' && !callback) callback = speed, speed = undefined
            var props = { opacity: opacity }
            if (scale) {
                props.scale = scale
                el.css($.fx.cssPrefix + 'transform-origin', '0 0')
            }
            return el.animate(props, speed, null, callback);
        }

        function hide(el, speed, scale, callback) {
            return anim(el, speed, 0, scale, function () {
                origHide.call($(this))
                callback && callback.call(this)
            })
        }

        $.fn.show = function (speed, callback) {
            origShow.call(this)
            //不是很理解作者的想法，如果这里继续执行下去，所有调用zepto原生show事件的元素，都会被这个事件覆盖，并且透明度都为被设为1...
            if (speed === undefined) return origShow.call(this) // 原版为：if (speed === undefined) speed = 0
            else this.css('opacity', 0)
            return anim(this, speed, 1, '1,1', callback)
        }

        $.fn.hide = function (speed, callback) {
            if (speed === undefined) return origHide.call(this)
            else return hide(this, speed, '0,0', callback)
        }

        $.fn.toggle = function (speed, callback) {
            if (speed === undefined || typeof speed == 'boolean')
                return origToggle.call(this, speed)
            else return this.each(function () {
                var el = $(this)
                el[el.css('display') == 'none' ? 'show' : 'hide'](speed, callback)
            })
        }

        $.fn.fadeTo = function (speed, opacity, callback) {
            return anim(this, speed, opacity, null, callback)
        }

        $.fn.fadeIn = function (speed, callback) {
            var target = this.css('opacity')
            if (target > 0) this.css('opacity', 0)
            else target = 1
            return origShow.call(this).fadeTo(speed, target, callback)
        }

        $.fn.fadeOut = function (speed, callback) {
            return hide(this, speed, null, callback)
        }

        $.fn.fadeToggle = function (speed, callback) {
            return this.each(function () {
                var el = $(this)
                el[
                  (el.css('opacity') == 0 || el.css('display') == 'none') ? 'fadeIn' : 'fadeOut'
                ](speed, callback)
            })
        }

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

        $.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);
        };
    })(Zepto)
View Code

 

作者：Harry

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接.

 

转载于:https://www.cnblogs.com/simendancer/p/5982761.html

weixin_30849591
关注
Zepto添加Slide动画效果
boy火巨的博客
11-05 2455
一.缘由       公司的移动端项目，采用zepto为主要框架，但是zepto毕竟是精简版的jquery，体积小了，功能自然没有这么强大，特别是动画和选择器这两块，需要我们自己去拓展。       在项目开发过程中，很多页面过渡需要用到动画，简单的show/hide过渡太生硬，对用户不友好，并且移动端大多都是采用slide效果，此文主要是为zepto拓展slide动画。 二.发现    ...
让zepto支持slideup(),slidedown()
weixin_34220963的博客
03-02 314
zepto不支持slideup()和slidedown()；使用以下方法可以支持该功能 &lt;div class="slide"&gt; &lt;p&gt; zepto不支持slideup()和slidedown()；使用以下方法可以支持该功能 &lt;/p&gt; &lt;/div&gt; &lt;button class="slide-t...
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
10-23
Swipe JS 是一个轻量级的移动滑动组件，支持 1:1 的触摸移动，阻力以及防滑性能都不错，可以让移动web应用展现更多的内容，能解决我们对于移动Web对滑动的需求。下面小编给大家介绍zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题，需要朋友可以参考下
zepto和jquery的区别，zepto的不同使用8条小结
热门推荐
kongjiea笔记
01-08 9万+
1. Zepto 对象 不能自定义事件   例如执行： $({}).bind('cust', function(){});  结果：  TypeError: Object has no method 'addEventListener'   解决办法是创建一个脱离文档流的节点作为事件对象：   例如： $('').bind('cust', function(){}); 2. Ze
Zepto-Slide:移动的Zepto滑块
05-23
Zepto.js 的核心特性包括选择器引擎、DOM 操作、事件处理以及动画效果，它具有体积小、性能高和良好的跨平台兼容性，非常适合在移动设备上使用。 **一、Zepto.js 介绍** Zepto.js 是由赵雷（David DeSandro）开发...
zepto.js插件适用于微信等移动浏览器动画滑动效果
06-12
我们常见到移动页面很多动画效果，但是自己原生开发一个动画效果是相当难的 今天就给大家推荐一套合适的模板 使用方法： 1、将style.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...
zepto手机页面滑动及页面动画特效.rar
10-24
这个"zepto手机页面滑动及页面动画特效.rar"压缩包文件包含了使用Zepto.js和CSS3实现的手机页面滑动和动画效果的实例。 首先，让我们深入了解一下Zepto.js。Zepto.js的核心设计理念是为移动设备提供快速、高效和跨...
基于zepto实现的适合移动网页的大转盘抽奖效果.zip
07-11
总结来说，基于Zepto.js实现的移动网页大转盘抽奖效果，融合了JavaScript动画、随机数生成、用户交互等多个技术点，既展示了Zepto.js在移动端的强大功能，也为网页设计师提供了实现互动效果的新途径。通过这个项目，...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
习惯有你&的博客
01-10 1万+
jQuery 滑动方法可使元素上下滑动。     jQuery slideDown() 方法用于向下滑动元素。     $(selector).slideDown(speed,callback);     可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。     可选的 callback 参数是滑动完成后所执行的函数名称。
animate动画在zepto.js框架中无法使用的解决方法
bocaidada的博客
10-09 2030
Zepto是一个轻量级的针对现代高级浏览器的JavaScript 库，简单来讲，zepto就是一个专为移动端而生的精简版jquery框架，语法和jquery几乎一模一样；可是在实际应用中你可能会发现jquery中使用频率非常高的animate动画方法在zepto中无法使用。 其实zepto是支持的，只不过没有集成到zepto核心文件中，需要大家在引入Zepto.js之后在引入官方提供的fx.js扩...
[JQ权威指南]SlideDown()与SlideUp()方法实现滑动效果
德仔
06-30 5292
SildeDown()与slideUp()方法 body{font-size:13px} .divFrame{width:86px; border:solid 1px #666} .divFrame.divTitle{ padding:5px; background-color:#eee} .divFrame.divContent{padding:8px} .divFrame.div
移动端Slider效果插件(for Zepto)
lufei1993425的博客
05-25 7425
昨天，有位叫学智的哥们（和我大学一个同学(绰号-法师)同名不同姓）要做一个手机上的页面切换效果，虽然自己的期望和实际的效果相差并不是很大，但法师追求完美，眼睛里揉不得沙子的秉性，把他逼得急躁，惶恐，甚至有些迷失自我，不得不为解决一个bug不惜搞出十个bug，法师快哭了…… 此时，老天有眼，曾经逼迫他的伟大秉性尚且给他留了点智商，学智想起了我们群，对！就是我们群——HTML5移动开发No.1，群号2
为Zepto添加Slide动画效果
weixin_33795806的博客
10-20 148
一.缘由       公司的移动端项目，采用zepto为主要框架，但是zepto毕竟是精简版的jquery，体积小了，功能自然没有这么强大，特别是动画和选择器这两块，需要我们自己去拓展。       在项目开发过程中，很多页面过渡需要用到动画，简单的show/hide过渡太生硬，对用户不友好，并且移动端大多都是采用slide效果，此文主要是为zepto拓展slide动画。   二.发现      ...
用原生javascript写出jquery中slideUp和slideDown效果
猫老板的豆
09-18 3343
<body> <header id="header" style="height: 60px;background-color: #272c35;"></header> <input type="button" id="ipt_btn" value="slide" /> <script type="text/javascript"> var slide
解决slideDown()、slideUp()执行结束后才执行下一次，导致鼠标离开后很久动画依然在执行的问题...
baifu2766的博客
12-29 329
问题描述： 给一个容器设置了mouseenter时，一个隐藏的box通过slideDown()显示出来；mouseleave时，通过slideUp()隐藏。 当鼠标不断在容器上滑过时，会导致鼠标离开很久后，动画也在不断执行 解决方法： 使用(selector).stop(stopAll,goToEnd);如：(this).find(...
动画效果-fadeIn fadeOut淡入浅出
z . s . j
04-16 1617
*{ margin:0; padding:0;}  body{font-size:15px;}  #container{ margin:60px; line-height:2em; width:300px; border:1px solid #CCC;}  .head{ background:#999; padding:5px; cursor:pointer;}  .content{ te
zepto 移动端案例(动画等)
weixin_43294560的博客
02-03 734
处理:滑动页面事件、动画效果(缩放、各方位滑动、抖动、明暗)、 代码示例: js文件: $(function(){ //定义方向对象 var direction={up:1,right:2,down:3,left:4}; //初始化两个页面坐标 var now={col:1,row:1}; var last={col:0,row:0}; //上一...
用原生JavaScript写出类似jQuery中slideUp和slideDown效果
johnworks Blog
04-29 1万+
本文主要介绍如何用原生JavaScript代码实现类似jQuery中的slideUp和slideDown效果。首先用一个不完善的例子来引入JavaScript中定时器的”问题“，然后给出相应的解决方案，最后给出slideUp和slideDown的最终实现。
zepto技术实现HTML5刮刮卡效果教程
3.项目的可配置性：该项目可能允许用户通过配置不同的参数来定制刮刮卡的行为和样式，如刮除区域的大小、颜色、动画效果等，以适应不同的使用场景。 五、学习与开发建议 1.学习zepto.js：对于前端开发人员来说，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值