前言

我们在移动端一般使用zepto框架，与其说zepto是jquery的轻量级替代版，不如说是html5替代版
我们在js中会用到animate方法执行动画，这个家伙可是真资格的动画，完全是css一点点变化的！
而zepto则不然，使用的是HTML5/CSS3的方案，而CSS相关是不保存元素状态值的，也没办法保存，所以停止动画就成了一大问题
我们今天就一起来讨论下相关停止动画的方案，反正没有什么好的......

在现有浏览器中，一般有两种模式（我只知道两种）：
一种是js动画，他是动态改写元素的style实现动画，所以任意时间想停止动画都是没问题的，因为我们可以获得各个阶段的状态值
另一种就是CSS3动画了，至于CSS3动画的原理，我不知道但是可以说一点的就是——见代码

="background-color: Orange; width: 100px; height: 100px; position: absolute; ); 15 d.animate({ ); () { )); );

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) ) setTimeout(function () { 90 that.each(function () { wrappedCallback.call(this) }) 91 }, 0) 92 93 return this 94 }