模块提供了
- fx
动画方法,
- animate
利用
- fx_methods
方法,提供一些常用的动画方法。所以
- animate
模块依赖于
- fx_methods
模块,在引入
- fx
前必须引入
- fx_methods
模块。
- fx
读 Zepto 源码系列文章已经放到了github上,欢迎star: reading-zepto
本文阅读的源码为 zepto1.2.0
《reading-zepto》
- 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
- 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
方法分析见《读Zepto源码之样式操作》
- hide
- $.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
- $.fn.hide = function(speed, callback) {
- if (speed === undefined) return origHide.call(this)
- else return hide(this, speed, '0,0', callback)
- }
如果
没有传递,简单调用原有的
- speed
方法即可,因为不需要过渡效果。
- hide
否则调用内部方法
。
- hide
- $.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
值的判断呢,这要看回 《读Zepto源码之样式操作》关于
- boolean
方法的分析了,原有的
- toggle
方法接收一个参数,如果为
- toggle
,则指定调用
- true
方法,否则调用
- show
方法。
- hide
否则,判断每个元素的
属性值,如果为
- display
,则调用
- none
方法显示,否则调用
- show
方法隐藏。
- hide
- $.fn.fadeTo = function(speed, opacity, callback) {
- return anim(this, speed, opacity, null, callback)
- }
可以其实是通过调节过渡时间
- fadeTo
和透明度
- speed
来实现动画效果。
- opacity
和
和
- show
不同的是,
- hide
的
- fadeTo
不一定为
- opacity
或者
- 1
, 可以由调用者指定。
- 0
- $.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
- $.fn.fadeOut = function(speed, callback) {
- return hide(this, speed, null, callback)
- }
淡出。
调用的是
- fadeOut
方法,只是不处理
- hide
变形。
- scale
- $.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
来源: http://www.cnblogs.com/hefty/p/7654370.html