css3技术

如何停止CSS3的动画?(2)

字号+ 作者:H5之家 来源:H5之家 2015-09-13 09:00 我要评论( )

最后实际上是执行anim实现我们的动画,大家注意看这里 $(this).css(cssReset) this.css(cssValues) 他事实上搞了个先设置动画属性,再给style属性给元素,所以会产生动画 到此,zepto实现动画原理我们大概知道了,

最后实际上是执行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争取周末搞出来

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • WEB2.0标准教程:如何应用WEB标准改善现有网站?_div+css布局教程

    WEB2.0标准教程:如何应用WEB标准改善现有网站?_div+css布局教程

    2015-10-02 13:03

  • 三列式网页布局如何用CSSfloats创建?_div+css布局教程

    三列式网页布局如何用CSSfloats创建?_div+css布局教程

    2015-09-29 08:18

  • Transparencecssmenu如何制作透明的CSS菜单_div+css布局教程

    Transparencecssmenu如何制作透明的CSS菜单_div+css布局教程

    2015-09-29 08:07

  • 固定宽度布局Div CSS如何创建?_div+css布局教程

    固定宽度布局Div CSS如何创建?_div+css布局教程

    2015-09-29 08:00

网友点评