• zepto为什么不支持animate,报animate is not a function


     在zepto.min.js文件中搜索animate看有没有,如果没有就是没有加入animate的模块

    解决办法,去github中打开src/文件夹,找到fx.js文件,把内容追加到zepto.min.js中

    因为有的zepto.min.js默认只是加载一部分模块的,如果需要touch,也可以加入touch.js模块

    地址:https://github.com/madrobby/zepto

    fx.js代码如下:

    //     Zepto.js
    //     (c) 2010-2016 Thomas Fuchs
    //     Zepto.js may be freely distributed under the MIT license.
    
    ;(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)
  • 相关阅读:
    .Net 6+项目使用Husky.Net在项目提交时格式化代码
    maven 之将项目打包压缩。
    netty ChannelPipeline流处理源码详细分析
    maven 之 将资源文件 copy到classes目录中
    maven 之 根据不同环境,选择不同的配置文件。
    flex+spring+blazds 数据推送,client自动断开问题。
    C#如何读写xml文件
    序列化 与 反序列化
    DataSet与List的转换
    Python基础入门
  • 原文地址:https://www.cnblogs.com/huanghuali/p/7514957.html
Copyright © 2020-2023  润新知