前言

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

CSS3动画原理

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

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

  <script id="Script1" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>

 </head>

 <body>

     <div id="Div1" style="background-color: Orange; width: 100px; height: 100px; position: absolute;

         left: 0; border: 1px solid black; ">

     </div>

 </body>

 <script src="../zepto.js" type="text/javascript"></script>

 <script type="text/javascript">

     var d = $('#d');

     d.animate({

         left: '100px'

     }, 10000);

     setTimeout(function () {

         d.html('left: ' + d.css('left'));

     }, 1);

 </script>

 </html>

http://sandbox.runjs.cn/show/xziwuir2

zepto的animate事实上马上就改变了style的值，所以我们在里面看到了left为100px，虽然他正在运动
而他动画的实现事实上使用的是CSS3的transition动画属性，我们这里来看看zepto的源码：

 var prefix = '', eventPrefix, endEventName, endAnimationName,

 vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' },

 document = window.document, testEl = document.createElement('div'),

 supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,

 transform,

 transitionProperty, transitionDuration, transitionTiming,

 animationName, animationDuration, animationTiming,

 cssReset = {}

 function dasherize(str) { return downcase(str.replace(/([a-z])([A-Z])/, '$1-$2')) }

 function downcase(str) { return str.toLowerCase() }

 function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : downcase(name) }

 $.each(vendors, function (vendor, event) {

     if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {

         prefix = '-' + downcase(vendor) + '-'

         eventPrefix = event

         return false

     }

 })

 transform = prefix + 'transform'

 cssReset[transitionProperty = prefix + 'transition-property'] =

 cssReset[transitionDuration = prefix + 'transition-duration'] =

 cssReset[transitionTiming = prefix + 'transition-timing-function'] =

 cssReset[animationName = prefix + 'animation-name'] =

 cssReset[animationDuration = prefix + 'animation-duration'] =

 cssReset[animationTiming = prefix + 'animation-timing-function'] = ''

 $.fx = {

     off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),

     speeds: { _default: 400, fast: 200, slow: 600 },

     cssPrefix: prefix,

     transitionEnd: normalizeEvent('TransitionEnd'),

     animationEnd: normalizeEvent('AnimationEnd')

 }

 $.fn.animate = function (properties, duration, ease, callback) {

     if ($.isPlainObject(duration))

         ease = duration.easing, callback = duration.complete, duration = duration.duration

     if (duration) duration = (typeof duration == 'number' ? duration :

                 ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000

     return this.anim(properties, duration, ease, callback)

 }

 $.fn.anim = function (properties, duration, ease, callback) {

     var key, cssValues = {}, cssProperties, transforms = '',

     that = this, wrappedCallback, endEvent = $.fx.transitionEnd

     if (duration === undefined) duration = 0.4

     if ($.fx.off) duration = 0

     if (typeof properties == 'string') {

         // keyframe animation

         cssValues[animationName] = properties

         cssValues[animationDuration] = duration + 's'

         cssValues[animationTiming] = (ease || 'linear')

         endEvent = $.fx.animationEnd

     } else {

         cssProperties = []

         // CSS transitions

         for (key in properties)

             if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '

             else cssValues[key] = properties[key], cssProperties.push(dasherize(key))

         if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)

         if (duration > 0 && typeof properties === 'object') {

             cssValues[transitionProperty] = cssProperties.join(', ')

             cssValues[transitionDuration] = duration + 's'

             cssValues[transitionTiming] = (ease || 'linear')

         }

     }

     wrappedCallback = function (event) {

         if (typeof event !== 'undefined') {

             if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"

             $(event.target).unbind(endEvent, wrappedCallback)

         }

         $(this).css(cssReset)

         callback && callback.call(this)

     }

     if (duration > 0) this.bind(endEvent, wrappedCallback)

     // trigger page reflow so new elements can animate

     this.size() && this.get(0).clientLeft

     this.css(cssValues)

     if (duration <= 0) setTimeout(function () {

         that.each(function () { wrappedCallback.call(this) })

     }, 0)

     return this

 }

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

如何停止动画

我们先看看这个东西：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <script id="Script2" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>

 </head>

 <body>

     <div id="Div2" style="background-color: Orange; width: 100px; height: 100px; position: absolute;

         left: 0; border: 1px solid black;">

     </div>

 </body>

 <script src="../zepto.js" type="text/javascript"></script>

 <script type="text/javascript">

     var d = $('#d');

     d.animate({

         left: '100px'

     }, 10000);

     setInterval(function () {

         d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft);

     }, 1);

 </script>

 </html>

http://sandbox.runjs.cn/show/gdqezvdo

其中虽然left一开始就变了，我们惊奇的发现，offset这个家伙居然保存了我们的状态！！！
我和我的小伙伴都惊呆了，因为我之前一直以为什么状态都不能获得，于是我们为他加上mousedown事件，各位运动时候点击试试
我们这里这样干了下：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <title></title>

     <script id="Script3" type="text/javascript" class="library" src="/js/sandbox/other/zepto.min.js"></script>

 </head>

 <body>

     <div id="Div3" style="background-color: Orange; width: 100px; height: 100px; position: absolute;

         left: 0; border: 1px solid black;">

     </div>

 </body>

 <script src="../zepto.js" type="text/javascript"></script>

 <script type="text/javascript">

     var d = $('#d');

     d.animate({

         left: '100px'

     }, 10000);

     setInterval(function () {

         d.html('left: ' + d.css('left') + ' _ offsetLeft: ' + d[0].offsetLeft);

     }, 1);

     d.mousedown(function (e) {

         console.log(d);

         d.css('transition', 'left 0s linear');

         d.css('left', d[0].offsetLeft + 'px');

     });

 </script>

 </html>

于是我们发现，动画停止了，亲！他真的停止了！！！
PS：因为项目过程中，我这里要模仿类似iscroll的滚动效果，所以使用的最多的就是top或者translate3d(0, 0, 0)这种东西

结语

本来这里还想深入一点研究下的，但是现在时间有点来不及，事情有点多，暂时到这里了吧，具体的demo争取周末搞出来

如何停止CSS3的动画？的更多相关文章

  1. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  2. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  3. CSS3 animation动画

    CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...

  4. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  5. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  6. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  7. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

  8. CSS3简单动画

    css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...

  9. css3常用动画+动画库

    一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...

随机推荐

  1. Android开发之注册登录

    昨天给大家介绍了一下关于Android端向服务器端发送数据的方法,不过貌似有一点瑕疵,今天经过调试已经解决,在这里给大家介绍一下 貌似Android4.0以后版本的对于网络权限要求变得严格,导致昨天编 ...

  2. codeforces Gargari and Bishops（很好的暴力）

    /* 题意:给你一个n*n的格子,每一个格子都有一个数值!将两只bishops放在某一个格子上, 每一个bishop可以攻击对角线上的格子(主对角线和者斜对角线),然后会获得格子上的 数值(只能获取一 ...

  3. Lua 学习笔记（二）语法、类型、值

    首先Lua执行的每一段代码都称之为“程序块”,一个程序块也就是一连串的语句或命令,例如一个源码文件或一行代码.Lua语句之间并不需要分隔符,如代码中的换行就不起任何作用,当然为了养成编码习惯当两条或者 ...

  4. Android基于mAppWidget实现手绘地图（一）--简介

    http://lemberg.github.io/mappwidget/user_guide.html 最近在看一些导游类应用,发现一些景区的导览图使用的完全是自定义地图,也就是手绘地图.这种小范围使 ...

  5. Spark入门实战系列--2.Spark编译与部署（上）--基础环境搭建

    [注] 1.该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取: 2.Spark编译与部署将以CentOS 64位操作系统为基础,主要是考虑到实际应用 ...

  6. 12个学习 CSS3 网站布局设计的优秀案例

    网络上有很多的 CSS 画廊站点供大家对各类网站作品进行打分和评论,每天有数以百计的优秀网站被推荐上面,这对于网页设计师来说是很好的灵感来源.今天,我们选择了15赢得 CSS 设计大奖的优秀作品,帮助 ...

  7. Activity onDestroy() 回调缓慢问题分析及完美解决方案

    说到Acitivity的onDestroy,对所有的Android开发者都很熟悉,但是不一定都知道里面存在着一些坑,分享给大家,以后踩中的时候可以应急 用Activity的时候,会发现如下问题: 有时 ...

  8. 用Latex写学术论文： IEEE Latex模板和文档设置(\documentclass)

    1.可以在博客园中使用latex代码输出公式,以后再以不用复制图片粘贴啦: http://www.cnblogs.com/cmt/p/3279312.html 例如以下代码两边加上 $ 符号后 x(k ...

  9. Entity Framework想说爱你不容易，这么多的报错，这么多的限制，该如何解决？

    首先看一下采用MODEL FIRST的方式设计的实体模型对象关系图: 注意:EntityOne中有导航属性:EntityTwo 在如下代码中的几种情况进行新增操作,均会报错,新增都不会成功: stat ...

  10. EF基本操作增、删、查、改、分页，join……等

    一.批量添加数据 static void Main(string[] args) { add(); add2(); Console.ReadKey(); } static void add() { D ...