读Zepto源码之fx_methods模块
来源:互联网 发布:c语言简单的冒泡排序 编辑:程序博客网 时间:2024/05/17 20:25
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.togglefunction 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)
最后,所有文章都会同步发送到微信公众号上,欢迎关注,欢迎提意见:
作者:对角另一面
- 读Zepto源码之fx_methods模块
- zepto源码之fx_methods.js
- 读Zepto源码之Event模块
- 读Zepto源码之Event模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Callbacks模块
- 读Zepto源码之Deferred模块
- 读Zepto源码之Event模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之Ajax模块
- 读Zepto源码之assets模块
- 读Zepto源码之Selector模块
- 读Zepto源码之Touch模块
- 读Zepto源码之Gesture模块
- 读Zepto源码之IOS3模块
- 读Zepto源码之IOS3模块
- 读Zepto源码之Fx模块
- Java中的final关键字
- pads layout 9.5笔记2-多层板设计要点
- 【BZOJ2118】墨墨的等式(dijkstra)
- bzoj 1005: [HNOI2008]明明的烦恼
- 【BZOJ2287】【POJChallenge】消失之物(权限题)
- 读Zepto源码之fx_methods模块
- BZOJ1051 [HAOI2006]受欢迎的牛
- 【51nod1531】树上的博弈
- Xcode9学习笔记2
- 2017Link
- IO基础(1)-File,IO流用法
- 私有构造函数的作用
- html之解决margin-top塌陷
- 056不定积分之指数函数,三角函数,平方和\差公式