读Zepto源码之fx_methods模块

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 主要实现 showhidefadeInfadeOut 等动画,用到的过渡属性为 opecityscale

当为 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 方法是 showhide 方法的切换。

如果 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 来实现动画效果。

showhide 不同的是,fadeToopacity 不一定为 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)
  })
}

切换淡入淡出效果。

如果 displaynode 时,调用 fadeIn 方法显示,否则调用 fadeOut 方法隐藏。

系列文章

  1. 读Zepto源码之代码结构
  2. 读Zepto源码之内部方法
  3. 读Zepto源码之工具函数
  4. 读Zepto源码之神奇的$
  5. 读Zepto源码之集合操作
  6. 读Zepto源码之集合元素查找
  7. 读Zepto源码之操作DOM
  8. 读Zepto源码之样式操作
  9. 读Zepto源码之属性操作
  10. 读Zepto源码之Event模块
  11. 读Zepto源码之IE模块
  12. 读Zepto源码之Callbacks模块
  13. 读Zepto源码之Deferred模块
  14. 读Zepto源码之Ajax模块
  15. 读Zepto源码之Assets模块
  16. 读Zepto源码之Selector模块
  17. 读Zepto源码之Touch模块
  18. 读Zepto源码之Gesture模块
  19. 读Zepto源码之IOS3模块
  20. 读Zepto源码之Fx模块

参考

License

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

作者:对角另一面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

4676
来自专栏为数不多的Android技巧

提升markdown的中文输入效率

Markdown这种格式的出现大大提升了写作的效率,但是它对于非英文的用户其实并不友好:每当我们需要使用#[-等标志符的时候,需要不断地切换输入法。

1681
来自专栏编程直播室

新增章节——Ionic 2 中添加图表

1393
来自专栏Petrichor的专栏

nano:基本操作

1534
来自专栏韩东吉的Unity杂货铺

零基础入门 21: UGUI Inputfield

因为一些外部原因,以后文章的发布只会在公众号内推送,取消了在蛮牛专栏的文章更新,望蛮牛小伙伴周知,关注微信公众号,可以第一时间收到新分享的推送通知。

1552
来自专栏SHERlocked93的前端小站

Vue 使用中的小技巧

在vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美的进行开发。下面有一些我在日常开发的时候用到的小技巧,在下将不定期更...

2092
来自专栏Puppeteer学习

Headless Chrome:服务端渲染JS站点的一个方案【中篇】【翻译】防止重新渲染优化

2103
来自专栏DannyHoo的专栏

底牌项目中上传牌谱功能之编辑标准模式

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/de...

1083
来自专栏IT笔记

SpringMvc+Velocity的一些配置总结

前言 公司用了许久的struts2+hibernate,前两年时间SpringMvic+Shiro也有做过,大多都是基于JSP实现的界面展示层,最近一段使用使用...

3507
来自专栏君赏技术博客

百思不得姐数据挖掘第一篇

这是此文档的第一篇文章,写在之前要说的话。里面设计的技术点可能有些新人不是太了解,我只会说我遇到的难点和思路,文章也是想到那里写到那里。

573

扫码关注云+社区