最后实际上是执行anim实现我们的动画,大家注意看这里
$(this).css(cssReset)
this.css(cssValues)
他事实上搞了个先设置动画属性,再给style属性给元素,所以会产生动画
到此,zepto实现动画原理我们大概知道了,现在问题就是如何停止他了,所以我们继续往下看
我们先看看这个东西:
="background-color: Orange; width: 100px; height: 100px; position: absolute; ); 15 d.animate({ ); () { ].offsetLeft); );
其中虽然left一开始就变了,我们惊奇的发现,offset这个家伙居然保存了我们的状态!!!
我和我的小伙伴都惊呆了,因为我之前一直以为什么状态都不能获得,于是我们为他加上mousedown事件,各位运动时候点击试试
我们这里这样干了下:
="background-color: Orange; width: 100px; height: 100px; position: absolute; ); 15 d.animate({ ); () { ].offsetLeft); ); (e) { 24 console.log(d); ); ); 27 });
于是我们发现,动画停止了,亲!他真的停止了!!!
PS:因为项目过程中,我这里要模仿类似iscroll的滚动效果,所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
本来这里还想深入一点研究下的,但是现在时间有点来不及,事情有点多,暂时到这里了吧,具体的demo争取周末搞出来