如何停止CSS3的动画?
前言
我们在移动端一般使用zepto框架,与其说zepto是jquery的轻量级替代版,不如说是html5替代版
我们在js中会用到animate方法执行动画,这个家伙可是真资格的动画,完全是css一点点变化的!
而zepto则不然,使用的是HTML5/CSS3的方案,而CSS相关是不保存元素状态值的,也没办法保存,所以停止动画就成了一大问题
我们今天就一起来讨论下相关停止动画的方案,反正没有什么好的......
CSS3动画原理
在现有浏览器中,一般有两种模式(我只知道两种):
一种是js动画,他是动态改写元素的style实现动画,所以任意时间想停止动画都是没问题的,因为我们可以获得各个阶段的状态值
另一种就是CSS3动画了,至于CSS3动画的原理,我不知道但是可以说一点的就是——见代码
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script id="Script1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> 6 </head> 7 <body> 8 <div id="Div1" style="background-color: Orange; width: 100px; height: 100px; position: absolute; 9 left: 0; border: 1px solid black; "> 10 </div> 11 </body> 12 <script src="../zepto.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 var d = $('#d'); 15 d.animate({ 16 left: '100px' 17 }, 10000); 18 19 setTimeout(function () { 20 d.html('left: ' + d.css('left')); 21 }, 1); 22 23 </script> 24 </html>
http://sandbox.runjs.cn/show/xziwuir2
zepto的animate事实上马上就改变了style的值,所以我们在里面看到了left为100px,虽然他正在运动
而他动画的实现事实上使用的是CSS3的transition动画属性,我们这里来看看zepto的源码:
1 var prefix = '', eventPrefix, endEventName, endAnimationName, 2 vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' }, 3 document = window.document, testEl = document.createElement('div'), 4 supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i, 5 transform, 6 transitionProperty, transitionDuration, transitionTiming, 7 animationName, animationDuration, animationTiming, 8 cssReset = {} 9 10 function dasherize(str) { return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2')) } 11 function downcase(str) { return str.toLowerCase() } 12 function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : downcase(name) } 13 14 $.each(vendors, function (vendor, event) { 15 if (testEl.style[vendor + 'TransitionProperty'] !== undefined) { 16 prefix = '-' + downcase(vendor) + '-' 17 eventPrefix = event 18 return false 19 } 20 }) 21 22 transform = prefix + 'transform' 23 cssReset[transitionProperty = prefix + 'transition-property'] = 24 cssReset[transitionDuration = prefix + 'transition-duration'] = 25 cssReset[transitionTiming = prefix + 'transition-timing-function'] = 26 cssReset[animationName = prefix + 'animation-name'] = 27 cssReset[animationDuration = prefix + 'animation-duration'] = 28 cssReset[animationTiming = prefix + 'animation-timing-function'] = '' 29 30 $.fx = { 31 off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined), 32 speeds: { _default: 400, fast: 200, slow: 600 }, 33 cssPrefix: prefix, 34 transitionEnd: normalizeEvent('TransitionEnd'), 35 animationEnd: normalizeEvent('AnimationEnd') 36 } 37 38 $.fn.animate = function (properties, duration, ease, callback) { 39 if ($.isPlainObject(duration)) 40 ease = duration.easing, callback = duration.complete, duration = duration.duration 41 if (duration) duration = (typeof duration == 'number' ? duration : 42 ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000 43 return this.anim(properties, duration, ease, callback) 44 } 45 46 $.fn.anim = function (properties, duration, ease, callback) { 47 var key, cssValues = {}, cssProperties, transforms = '', 48 that = this, wrappedCallback, endEvent = $.fx.transitionEnd 49 50 if (duration === undefined) duration = 0.4 51 if ($.fx.off) duration = 0 52 53 if (typeof properties == 'string') { 54 // keyframe animation 55 cssValues[animationName] = properties 56 cssValues[animationDuration] = duration + 's' 57 cssValues[animationTiming] = (ease || 'linear') 58 endEvent = $.fx.animationEnd 59 } else { 60 cssProperties = [] 61 // CSS transitions 62 for (key in properties) 63 if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') ' 64 else cssValues[key] = properties[key], cssProperties.push(dasherize(key)) 65 66 if (transforms) cssValues[transform] = transforms, cssProperties.push(transform) 67 if (duration > 0 && typeof properties === 'object') { 68 cssValues[transitionProperty] = cssProperties.join(', ') 69 cssValues[transitionDuration] = duration + 's' 70 cssValues[transitionTiming] = (ease || 'linear') 71 } 72 } 73 74 wrappedCallback = function (event) { 75 if (typeof event !== 'undefined') { 76 if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below" 77 $(event.target).unbind(endEvent, wrappedCallback) 78 } 79 $(this).css(cssReset) 80 callback && callback.call(this) 81 } 82 if (duration > 0) this.bind(endEvent, wrappedCallback) 83 84 // trigger page reflow so new elements can animate 85 this.size() && this.get(0).clientLeft 86 87 this.css(cssValues) 88 89 if (duration <= 0) setTimeout(function () { 90 that.each(function () { wrappedCallback.call(this) }) 91 }, 0) 92 93 return this 94 }
View Code
最后实际上是执行anim实现我们的动画,大家注意看这里
$(this).css(cssReset)
this.css(cssValues)
他事实上搞了个先设置动画属性,再给style属性给元素,所以会产生动画
到此,zepto实现动画原理我们大概知道了,现在问题就是如何停止他了,所以我们继续往下看
如何停止动画
我们先看看这个东西:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> 6 </head> 7 <body> 8 <div id="Div2" style="background-color: Orange; width: 100px; height: 100px; position: absolute; 9 left: 0; border: 1px solid black;"> 10 </div> 11 </body> 12 <script src="../zepto.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 var d = $('#d'); 15 d.animate({ 16 left: '100px' 17 }, 10000); 18 19 setInterval(function () { 20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); 21 }, 1); 22 23 </script> 24 </html>
http://sandbox.runjs.cn/show/gdqezvdo
其中虽然left一开始就变了,我们惊奇的发现,offset这个家伙居然保存了我们的状态!!!
我和我的小伙伴都惊呆了,因为我之前一直以为什么状态都不能获得,于是我们为他加上mousedown事件,各位运动时候点击试试
我们这里这样干了下:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script> 6 </head> 7 <body> 8 <div id="Div3" style="background-color: Orange; width: 100px; height: 100px; position: absolute; 9 left: 0; border: 1px solid black;"> 10 </div> 11 </body> 12 <script src="../zepto.js" type="text/javascript"></script> 13 <script type="text/javascript"> 14 var d = $('#d'); 15 d.animate({ 16 left: '100px' 17 }, 10000); 18 19 setInterval(function () { 20 d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft); 21 }, 1); 22 23 d.mousedown(function (e) { 24 console.log(d); 25 d.css('transition', 'left 0s linear'); 26 d.css('left', d[0].offsetLeft + 'px'); 27 }); 28 29 </script> 30 </html>
于是我们发现,动画停止了,亲!他真的停止了!!!
PS:因为项目过程中,我这里要模仿类似iscroll的滚动效果,所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西
结语
本来这里还想深入一点研究下的,但是现在时间有点来不及,事情有点多,暂时到这里了吧,具体的demo争取周末搞出来
如何停止CSS3的动画?相关推荐
- css3动画动一次就停止,css - 在最后一帧停止CSS3动画
css - 在最后一帧停止CSS3动画 我有一个4部分CSS3动画点击播放 - 但动画的最后一部分是为了将其从屏幕上取下. 但是,它一旦播放就会回到原来的状态. 任何人都知道如何在最后一个css帧(1 ...
- css3的动画特效--元素旋转(transition,animation)
css3的动画特效--元素旋转(transition,animation) 开发中,视觉要你实现一个元素的旋转问题,比如说如下图所示: 思路:首先动画动效肯定离不开anmimation动画. 和tra ...
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- CSS3 animation动画,风车旋转、loading、人物走路动画案例
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- html5+css3实现动画、逐帧动画效果
上篇博文中讲明了html5+css3实现2D-3D动画效果,介绍了html5中2d.3d的运用,顺便简明的提到了动画,而本篇将更加详细的说明动画的各运用及说明. 首先我们需要了解css3中动画的意思, ...
- android开发骰子动画,GitHub - jieyou/dice: 一个css3 3d动画效果的色子(或称骰子?)...
dice -- 3d色子(或称骰子?) 一个css3 3d动画效果的色子 完全效果(完全流畅的3d动画.阴影.圆角):Chrome\Firefox\Safari\iOS Safari 6.0+\And ...
- 8款帅酷的HTML5/CSS3 3D动画、图片、菜单应用
今天要给大家分享8款帅酷的HTML5/CSS3应用,它们中包括很酷的HTML5 3D动画应用,也包括实用的CSS3图片.菜单.进度条等插件,一起来看看吧. 1.HTML5 Canvas火焰燃烧动画 如 ...
- CSS3与动画有关的属性transition、animation、transform对比
最近应公司需求,需要用css3做动画,终于把以前一直傻傻分不清楚的三个属性理解了. 索性在这里进行一个简单的对比,加深自己的记忆. 浏览器兼容性 CSS3 transform 属性 Internet ...
- html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
最新文章
- 徐文尚计算机控制系统,【计算机控制系统 徐文尚】_计算机控制系统 徐文尚参考资料-毕业论文范文网...
- html中内联元素和块元素的区别、用法以及联系
- python seek tell_Python指针seektell详解
- 【Python教程】 正则表达式 re模块中,反斜杠 “\“分割字符串的正确操作方法
- go test 如何输出到控制台_GO笔记之GO命令快速体验
- python 把数据写到tet_Python随身听023基础知识到底哪里用逗号?
- 实现机器学习的循序渐进指南VIII——线性回归
- VC++实现数据包嗅探
- 项目管理九大知识领域
- 《插件积累》页面音乐下载,付费音乐下载.
- 《亲密关系》读后感_设计的直觉和亲密感
- 50种黑白人像摄影调色效果lr预设
- C语言:int型数据向char型数据的强制类型转换原理
- 今15年创业,享受改变的过程
- 人生其实就好象一罐煤气
- 在Vue.data已定义的变量,运行时却找不到变量
- 美国FBA海运专线有哪些优势?
- Hi3518ev200:内核启动分析
- Codevs p1014 装箱问题
- 微软公司招聘智力题目
热门文章
- pytest测试框架(五)---使用xfail将用例标记为失败
- Linux文件属性与管理
- 软件测试—软件测试基础知识—测试用例设计的方法之场景法、正交试验法和错误推断法
- matlab cgf sc 未定义,matlab通用神經網絡代碼
- python在csv模块添加新列_如何在CSV文件的开头添加新列?
- 金融数据分析与挖掘实战练习2.5-2.9
- win10语音语言服务器,win10系统:朗读女语音库(发音人)安装方法说明
- idea module取得是parent的文件路径_React(或使用TS)中样式混乱解决方案 *.module.less...
- 广域网访问局域网路由器设置_交换机路由器如何连接 交换机路由器连接方法【详解】...
- C语言学习笔记---abs()函数和div()函数