读Zepto源码之fx_methods模块

junbaor 发布于2019-08-21 16:59 / 2581人阅读

摘要：所以模块依赖于模块，在引入前必须引入模块。原有的方法分析见读源码之样式操作方法首先调用原有的方法，将元素显示出来，这是实现动画的基本条件。如果没有传递，或者为值，则表示不需要动画，调用原有的方法即可。

fx 模块提供了 animate 动画方法，fx_methods 利用 animate 方法，提供一些常用的动画方法。所以 fx_methods 模块依赖于 fx 模块，在引入 fx_methods 前必须引入 fx 模块。

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

源码版本

本文阅读的源码为 zepto1.2.0

GitBook

《reading-zepto》

内部方法 anim

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

如果 speed 的参数类型为函数，并且 callback 没有传递，则认为 speed 位置的参数为 callback。

props 是过渡的属性， fx_fethods 主要实现 show 、 hide 和 fadeIn、 fadeOut 等动画，用到的过渡属性为 opecity 和 scale 。

当为 scale 时，将转换的原点设置为 0 0。

最后调用的是 fx 模块中的 animate 方法。

hide

var document = window.document, docElem = document.documentElement,
    origShow = $.fn.show, origHide = $.fn.hide, origToggle = $.fn.toggle
function hide(el, speed, scale, callback) {
  return anim(el, speed, 0, scale, function(){
    origHide.call($(this))
    callback && callback.call(this)
  })
}

hide 方法其实就是将 opacity 的属性设置为 0 。在动画完成后，调用 origHide 方法，即原有的 hide 方法，将元素的 display 设置为 none。原有的 hide 方法分析见《读Zepto源码之样式操作》

.show()

$.fn.show = function(speed, callback) {
  origShow.call(this)
  if (speed === undefined) speed = 0
  else this.css("opacity", 0)
  return anim(this, speed, 1, "1,1", callback)
}

show 方法首先调用原有的 hide 方法，将元素显示出来，这是实现动画的基本条件。

如果没有设置 speed，表示不需要动画，则过渡时间 speed 设置为 0。立即显示元素。

否则，先将 opactity 设置为 0，再调用 anim 方法执行动画。opacity 设置为 0 也是执行动画的关键，从 0 变为 1 才有过渡的效果。

.hide()

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

如果 speed 没有传递，简单调用原有的 hide 方法即可，因为不需要过渡效果。

否则调用内部方法 hide。

.toggle()

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

toggle 方法是 show 和 hide 方法的切换。

如果 speed 没有传递，或者为 boolean 值，则表示不需要动画，调用原有的 toggle 方法即可。为什么要有一个 boolean 值的判断呢，这要看回《读Zepto源码之样式操作》关于 toggle 方法的分析了，原有的 toggle 方法接收一个参数，如果为 true，则指定调用 show 方法，否则调用 hide 方法。

否则，判断每个元素的 display 属性值，如果为 none，则调用 show 方法显示，否则调用 hide 方法隐藏。

.fadeTo()

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

fadeTo 可以其实是通过调节过渡时间 speed 和透明度 opacity 来实现动画效果。

和 show 和 hide 不同的是，fadeTo 的 opacity 不一定为 1 或者 0，可以由调用者指定。

.fadeIn()

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

淡入效果。

fadeIn 其实调用的是 fadeTo ，跟 show 有点类似，最终将 opacity 变为 1 。只是不处理 scale 变形。

.fadeOut()

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

淡出。

fadeOut 调用的是 hide 方法，只是不处理 scale 变形。

.fadeToggle()

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

切换淡入淡出效果。

如果 display 为 node 时，调用 fadeIn 方法显示，否则调用 fadeOut 方法隐藏。

系列文章

读Zepto源码之代码结构

读Zepto源码之内部方法

读Zepto源码之工具函数

读Zepto源码之神奇的$

读Zepto源码之集合操作

读Zepto源码之集合元素查找

读Zepto源码之操作DOM

读Zepto源码之样式操作

读Zepto源码之属性操作

读Zepto源码之Event模块

读Zepto源码之IE模块

读Zepto源码之Callbacks模块

读Zepto源码之Deferred模块

读Zepto源码之Ajax模块

读Zepto源码之Assets模块

读Zepto源码之Selector模块

读Zepto源码之Touch模块

读Zepto源码之Gesture模块

读Zepto源码之IOS3模块

读Zepto源码之Fx模块

参考 License

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

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面

云服务器 GPU云服务器读源码源码中文说明之源码编译模块 linux 模块源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88984.html

读Zepto源码之Stack模块

摘要：读源码系列文章已经放到了上，欢迎源码版本本文阅读的源码为改写原有的方法模块改写了以上这些方法，这些方法在调用的时候，会为返回的结果添加的属性，用来保存原来的集合。方法的分析可以看读源码之模块。 Stack 模块为 Zepto 添加了 addSelf 和 end 方法。读 Zepto 源码系列文章已经放到了github上，欢迎star: reading-zepto 源码版本本文阅读的...

crossea 2019-08-21 17:03 评论0 收藏0
读Zepto源码之Form模块

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。 Form 模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发 submit 事件，提交表单。读 Zepto 源码系列文章已...

陈江龙 2019-08-21 17:12 评论0 收藏0
读Zepto源码之Data模块

摘要：的模块用来获取节点中的属性的数据，和储存跟相关的数据。获取节点指定的缓存值。如果存在，则删除指定的数据，否则将缓存的数据全部删除。为所有下级节点，如果为方法，则节点自身也是要被移除的，所以需要将自身也加入到节点中。 Zepto 的 Data 模块用来获取 DOM 节点中的 data-* 属性的数据，和储存跟 DOM 相关的数据。读 Zepto 源码系列文章已经放到了github上，欢...

wua_wua2012 2019-08-21 17:14 评论0 收藏0
记一次页面卡顿排查

摘要：记一次页面卡顿排查前述前段时间上线的一个移动端的项目，由于开发时间仓促，一直被用户投诉页面卡顿。这显然要导致卡顿。总结这只是页面卡顿的一个点，当然还有很多，我们的页面卡顿就是由这样一个一个的点造成的。记一次页面卡顿排查前述前段时间上线的一个移动端的项目，由于开发时间仓促，一直被用户投诉页面卡顿。现在终于有时间来好好排查一下，看到底是什么原因。业务代码都不是自己写的，这是颇为头疼的...

Lin_YT 2019-08-21 10:53 评论0 收藏0
2017-10-12 前端日报

摘要：前端日报精选带来了什么以及对的解释专题之乱序第期如何无痛降低面条代码复杂度道阻且长啊前端面试总结附答案上前端安全知识中文开源许可证教程阮一峰的网络日志装饰器让你的代码更简洁掘金什么是函数众成翻译和十分钟快速入门众成翻译设计最佳实 2017-10-12 前端日报精选 React 16 带来了什么以及对 Fiber 的解释JavaScript专题之乱序【第1076期】如何无痛降低 if...

DangoSky 2019-08-21 17:00 评论0 收藏0