我们在移动端一般使用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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>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 }最后实际上是执行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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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>其中虽然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" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../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)这种东西。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦