读Zepto源码之Fx模块

fx 模块为利用 CSS3 的过渡和动画的属性为 Zepto 提供了动画的功能，在 fx 模块中，只做了事件和样式浏览器前缀的补全，没有做太多的兼容。对于不支持 CSS3 过渡和动画的， Zepto 的处理也相对简单，动画立即完成，马上执行回调。

读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

《reading-zepto》

内部方法

dasherize

function dasherize(str) { return str.replace(/([A-Z])/g, '-$1').toLowerCase() }

这个方法是将驼峰式（ camleCase ）的写法转换成用 - 连接的连词符的写法（ camle-case ）。转换的目的是让写法符合 css 的样式规范。

normalizeEvent

function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() }

为事件名增加浏览器前缀。

为事件和样式增加浏览器前缀

变量

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 = {}

vendors 定义了浏览器的样式前缀（ key ）和事件前缀 ( value ) 。

testEl 是为检测浏览器前缀所创建的临时节点。

cssReset 用来保存加完前缀后的样式规则，用来过渡或动画完成后重置样式。

浏览器前缀检测

if (testEl.style.transform === undefined) $.each(vendors, function(vendor, event){

  if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {

    prefix = '-' + vendor.toLowerCase() + '-'

    eventPrefix = event

    return false

  }

})

检测到浏览器不支持标准的 transform 属性，则依次检测加了不同浏览器前缀的 transitionProperty 属性，直至找到合适的浏览器前缀，样式前缀保存在 prefix 中，事件前缀保存在 eventPrefix 中。

初始化样式

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'] = ''

获取浏览器前缀后，为所有的 transition 和 animation 属性加上对应的前缀，都初始化为 ''，方便后面使用。

方法

$.fx

$.fx = {

  off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),

  speeds: { _default: 400, fast: 200, slow: 600 },

  cssPrefix: prefix,

  transitionEnd: normalizeEvent('TransitionEnd'),

  animationEnd: normalizeEvent('AnimationEnd')

}

off: 表示浏览器是否支持过渡或动画，如果既没有浏览器前缀，也不支持标准的属性，则判定该浏览器不支持动画
speeds: 定义了三种动画持续的时间，默认为 400ms
cssPrefix: 样式浏览器兼容前缀，即 prefix
transitionEnd：过渡完成时触发的事件，调用 normalizeEvent 事件加了浏览器前缀补全
animationEnd：动画完成时触发的事件，同样加了浏览器前缀补全

animate

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

}

我们平时用得最多的是 animate 这个方法，但是这个方法最终调用的是 anim 这个方法，animate 这个方法相当灵活，因为它主要做的是参数修正的工作，做得参数适应 anim 的接口。

参数：

properties：需要过渡的样式对象，或者 animation 的名称，只有这个参数是必传的
duration: 过渡时间
ease: 缓动函数
callback: 过渡或者动画完成后的回调函数
delay: 过渡或动画延迟执行的时间

修正参数

if ($.isFunction(duration))

  callback = duration, ease = undefined, duration = undefined

这是处理传参为 animate(properties, callback) 的情况。

if ($.isFunction(ease))

    callback = ease, ease = undefined

这是处理 animate(properties, duration, callback) 的情况，此时 callback 在参数 ease 的位置

if ($.isPlainObject(duration))

  ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration

这是处理 animate(properties, { duration: msec, easing: type, complete: fn }) 的情况。除了 properties ，后面的参数还可以写在一个对象中传入。

如果检测到为对象的传参方式，则将对应的值从对象中取出。

if (duration) duration = (typeof duration == 'number' ? duration :

                          ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000

如果过渡时间为数字，则直接采用，如果是 speeds 中指定的 key ，即 slow 、fast 甚至 _default ，则从 speeds 中取值，否则用 speends 的 _default 值。

因为在样式中是用 s 取值，所以要将毫秒数除 1000。

if (delay) delay = parseFloat(delay) / 1000

也将延迟时间转换为秒。

anim

$.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

}

animation 最终调用的是 anim 方法，Zepto 也将这个方法暴露了出去，其实我觉得只提供 animation 方法就可以了，这个方法完全可以作为私有的方法调用。

参数默认值

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

if (delay === undefined) delay = 0

if ($.fx.off) duration = 0

如果没有传递持续时间 duration ，则默认为 $.fx.speends._default 的定义值 400ms ，这里需要转换成 s 。

如果没有传递 delay ，则默认不延迟，即 0 。

如果浏览器不支持过渡和动画，则 duration 设置为 0 ，即没有动画，立即执行回调。

处理animation动画参数

if (typeof properties == 'string') {

  // keyframe animation

  cssValues[animationName] = properties

  cssValues[animationDuration] = duration + 's'

  cssValues[animationDelay] = delay + 's'

  cssValues[animationTiming] = (ease || 'linear')

  endEvent = $.fx.animationEnd

}

如果 properties 为 string，即 properties 为动画名，则设置动画对应的 css ，duration 和 delay 都加上了 s 的单位，默认的缓动函数为 linear 。

处理transition参数

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')

  }

}

supportedTransforms 是用来检测是否为 transform 的正则，如果是 transform ，则拼接成符合 transform 规则的字符串。

否则，直接将值存入 cssValues 中，将 css 的样式名存入 cssProperties 中，并且调用了 dasherize 方法，使得 properties 的 css 样式名（ key ）支持驼峰式的写法。

if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)

这段是检测是否有 transform ，如果有，也将 transform 存入 cssValues 和 cssProperties 中。

接下来判断动画是否开启，并且是否有过渡属性，如果有，则设置对应的值。

回调函数的处理

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)

}

如果浏览器支持过渡或者动画事件，则在动画结束的时候，取消事件监听，注意在 unbind 时，有个 event.target !== event.currentTarget 的判定，这是排除冒泡事件。

如果事件不存在时，直接取消对应元素上的事件监听。

并且将状态控制 fired 设置为 true ，表示回调已经执行。

动画完成后，再将涉及过渡或动画的样式设置为空。

最后，调用传递进来的回调函数，整个动画完成。

绑定过渡或动画的结束事件

if (duration > 0){

  this.bind(endEvent, wrappedCallback)

  setTimeout(function(){

    if (fired) return

    wrappedCallback.call(that)

  }, ((duration + delay) * 1000) + 25)

}

绑定过渡或动画的结束事件，在动画结束时，执行处理过的回调函数。

注意这里有个 setTimeout ，是避免浏览器不支持过渡或动画事件时，可以通过 setTimeout 执行回调。setTimeout 的回调执行比动画时间长 25ms ，目的是让事件响应在 setTimeout 之前，如果浏览器支持过渡或动画事件， fired 会在回调执行时设置成 true， setTimeout 的回调函数不会再重复执行。

触发页面回流

 // trigger page reflow so new elements can animate

this.size() && this.get(0).clientLeft

this.css(cssValues)

这里用了点黑科技，读取 clientLeft 属性，触发页面的回流，使得动画的样式设置上去时可以立即执行。

具体可以这篇文章中的解释：2014-02-07-hidden-documentation.md

过渡时间不大于零的回调处理

if (duration <= 0) setTimeout(function() {

  that.each(function(){ wrappedCallback.call(this) })

}, 0)

duration 不大于零时，可以是参数设置错误，也可能是浏览器不支持过渡或动画，就立即执行回调函数。

系列文章

附文

译：怎样处理 Safari 移动端对图片资源的限制

参考

License

署名-非商业性使用-禁止演绎 4.0 国际 (CC BY-NC-ND 4.0)

作者：对角另一面