移动手机web页面多次触发webkitTransitionEnd的问题
2013-10-24 14:27
239 查看
原文链接:http://www.cnblogs.com/qgd87/p/3386024.html
webkitTransitionEnd事件
在WebKit引擎的浏览器中,当CSS 3的transition动画执行结束时,触发webkitTransitionEnd事件。在CSS 3中,使用如下所示的样式代码定义transition动画。
<style> .target{ width: 100px; height: 100px; background: #ff0000; } .target{ -webkit-transition: all 0.25s ease-in; } .target.on{ -webkit-transform: translate(100px,0); } </style>
上面这段代码执行功能同样为在0.5秒内将元素向右移动100像素后将其返回。我们可以在这个动画结束时触发的webkitTransitionEnd事件中执行一些代码,例如显示动画已执行结束,以及动画的执行次数。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>移动手机web页面多次触发webkitTransitionEnd的问题</title> <style> .target{ width: 100px; height: 100px; background: #ff0000; } .target{ -webkit-transition: all 0.25s ease-in; } .target.on{ -webkit-transform: translate(100px,0); } </style> <div class="viewArea anime"> <div class="target" style="margin:0px;"></div> <p class="count"></p> <p class="trnstnCount"></p> <a href="#" class="btn01" style="color:blue">执行animation动画</a> </div> <script> function sample() { var target = document.querySelector('.target'), count = document.querySelector('.count'), btn = document.querySelector('.btn01'), trnstnCount = document.querySelector('.trnstnCount'), countNum = 0, trnstnCountN 3ff7 um = 0; target.addEventListener('webkitTransitionEnd', end, false); btn.addEventListener('click', tStart, false); function tStart(e) { e.preventDefault(); countNum ++; target.classList.add('on'); count.innerHTML = "动画执行次数:" + countNum; return false; } function end() { trnstnCountNum ++; target.classList.remove('on'); trnstnCount.innerHTML = "webkitTransitionEnd事件触发次数:" + trnstnCountNum; return false; } } document.addEventListener('DOMContentLoaded', sample, false); </script> </head> <body> </body> </html>View Code
从执行结果中我们可以看出,在每个动画的执行过程中,webkitTransitionEnd事件的触发了2次,这是因为webkitAnimationEnd事件只在元素向右移动,然后向左返回之后触发一次,而webkitTransitionEnd事件将在元素向右移动之后触发一次,在元素向左返回之后再触发一次。
接下来,我们为元素多指定一个opacity(透明度)样式属性,代码如下所示:
<style> .target{ width: 100px; height: 100px; background: #ff0000; } .target{ -webkit-transition: all 0.25s ease-in; } .target.on{ -webkit-transform: translate(100px,0); opacity: 0.5; } </style>
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>移动手机web页面多次触发webkitTransitionEnd的问题</title> <style> .target{ width: 100px; height: 100px; background: #ff0000; } .target{ -webkit-transition: all 0.25s ease-in; } .target.on{ -webkit-transform: translate(100px,0); opacity: 0.5; } </style><div class="viewArea anime"> <div class="target" style="margin:0px;"></div> <p class="count"></p> <p class="trnstnCount"></p> <a href="#" class="btn01" style="color:blue">执行animation动画</a> </div> <script> function sample() { var target = document.querySelector('.target'), count = document.querySelector('.count'), btn = document.querySelector('.btn01'), trnstnCount = document.querySelector('.trnstnCount'), countNum = 0, trnstnCountNum = 0; target.addEventListener('webkitTransitionEnd', end, false); btn.addEventListener('click', tStart, false); function tStart(e) { e.preventDefault(); countNum ++; target.classList.add('on'); count.innerHTML = "动画执行次数:" + countNum; return false; } function end() { trnstnCountNum ++; target.classList.remove('on'); trnstnCount.innerHTML = "webkitTransitionEnd事件触发次数:" + trnstnCountNum; return false; } } document.addEventListener('DOMContentLoaded', sample, false); </script> </head> <body> </body> </html>View Code
从执行结果中我们可以看出,如果多使用一个样式属性,在每个动画执行的过程中webkitTransitionEnd事件的触发次数将多增加两次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。
转载于:https://www.cnblogs.com/qgd87/p/3386024.html
相关文章推荐
- ios 微信浏览器中 触发webkitTransitionEnd 问题
- 移动web端页面如何调用手机QQ?
- WebView加载https链接的安全校验问题【7.0手机验证证书无法加载出带证书https页面】
- h5页面在手机浏览器上不能上下移动的问题
- 移动web页面使用微软雅黑字体的问题
- 移动Web开发--Android自带浏览器弹软键盘触发resize事件问题
- 移动web相关touch事件触发(touchstart/touchmove/touchend)
- 移动web 页面常见问题总结
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 在web页面上放了一些服务器按钮,在各个按钮的单击事件中都有代码!可不知道哪里出问题了,怎么操作都不能触发这些事件,好象代码一点都不执行!根本没办法调试!请高手指点一二!谢谢!
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 解决webview多次加载,无法准确判断页面加载完成的问题
- WebView加载详情页面时Android4.4.4系统手机下拉时文字出现半屏问题
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- samsung 手机webview 加载https 页面不显示问题
- Android 安卓WebView套壳H5网页 手机返回键问题(过滤二级页面,返回键相应给WebView)
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送
- 移动web页面调起手机键盘各种功能的方法