如何停止CSS3的动画？
前言
我们在移动端一般使用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的动画？的更多相关文章
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
- CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画2.animation-name 动画名称3.animation-duration 动画时间4.animation-timin ...
- CSS3 @keyframes 动画
CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...
- 使用css3的动画模拟太阳系行星公转
本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- css3 animation动画特效插件的巧用
这一个是css3 animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...
- CSS3简单动画
css3的动画确实非常绚丽!浏览器兼容性很重要!. 分享两个小动画 <!doctype html> <html lang="en"> <head> ...
- css3常用动画+动画库
一.animates.css animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库.包含了60多款不同类型的CSS3动画,包括:晃动,闪动,各种淡 ...
随机推荐
- CSS实现垂直居中的4种思路
× 目录 [1]line-height [2]vertical-align [3]absolute [4]flex 前面的话 相对于水平居中,人们对于垂直居中略显为难,大部分原因是vertical-a ...
- [OpenCV] Samples 09: image
根据需求,转化为不同的颜色格式,split后处理各自通道. plImage <==> Mat 格式转换 Mat --> plImage 简单写法: IplImage copy = m ...
- tomcat server容器解读
1. server的实例类为:org.apache.catalina.core.StandardServer为顶层容器. 2.二级容器GlobalNamingResources,设置认证用户信息. & ...
- Linux一块网卡添加多个IP地址
环境: RHEL6.4 需求: Linux一块网卡添加多个IP地址 一.临时生效 1.1 网卡eth0添加一个IP地址 1.2 修改eth0:0的广播地址 二.永久生效 2.1 编辑ifcfg-eth ...
- CentOS 7添加yum源
RedHat下主要有两个distribution,一曰 RHEL(Red Hat Enterprise Linux) 一曰 Fedora.前者主要是供服务器使用,优点是稳定,缺点是老的掉牙,后者是供桌 ...
- Winform应用程序实现通用遮罩层
在WEB上,我们在需要进行大数据或复杂逻辑处理时,由于耗时较长,一般我们会在处理过程中的页面上显示一个半透明的遮罩层,上面放个图标或提示:正在处理中...等字样,这样用户体验就比较好了,然而如果在Wi ...
- CSS基础-插曲
CSS学习 1:通过css来设置边框的颜色 我们可以通过border:10px solid red;来统一的设置颜色,但是我们有的时候需要每个边框的颜色不一样,我们就需要通过各自设置的方法来设置边框的 ...
- Asp.net(C#) windows 服务{用于实现计划任务,事件监控等}
什么是windows服务? 一个Windows服务程序是在Windows操作系统下能完成特定功能的可执行的应用程序.Windows服务程序虽然是可执行的,但是它不像一般的可执行文件通过双击就 ...
- html的<!DOCTYPE>标签初窥
<!DOCTYPE>标签必须放在整个html文档的第一行,之后一行就是从<html>标签开始,所有浏览器都支持<!DOCTYPE>标签. <!DOCTYPE& ...
- 基于MVC4+EasyUI的Web开发框架经验总结（6）--在页面中应用下拉列表的处理
在很多Web界面中,我们都可以看到很多下拉列表的元素,有些是固定的,有些是动态的:有些是字典内容,有些是其他表里面的名称字段:有时候引用的是外键ID,有时候引用的是名称文本内容:正确快速使用下拉列表的 ...