这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文主要给大家介绍的是如何使用 javascript 判断 CSS3 动画效果结束,主要是使用了 javascript 的回调函数,其思路是一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持,非常的简单实用,推荐给大家。
css3 的时代,css3-- 动画 一切皆有可能;
传统的 js 可以通过回调函数判断动画是否结束;即使是采用 CSS 技术生成动画效果,JavaScript 仍然能捕获动画或变换的结束事件;
transitionend 事件和 animationend 事件标准的浏览器事件,但在 webKit 浏览器里你仍然需要使用 webkit 前缀,所以,我们不得不根据各种浏览器分别检测事件
- var transitions = {
- 'transition':'transitionend',
- 'OTransition':'oTransitionEnd',
- 'MozTransition':'transitionend',
- 'WebkitTransition':'webkitTransitionEnd'
- }
下面附上源代码:
- <!doctype html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>suface js判断css动画是否结束</title>
- </head>
- <body>
- <p>一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持。<br> </p>
- <style type="text/css">
- .sample {
- width: 200px;
- height: 200px;
- border: 1px solid green;
- background: lightgreen;
- opacity: 1;
- margin-bottom: 20px;
- transition-property: opacity;
- /*transition-duration: .5s;*/
- transition-duration:3s;
- }
- .sample.hide {
- opacity: 0;
- }
- </style>
- <div class="sample">css3动画过度慢慢隐藏(transition-duration:3s;)</div>
- <p><button onclick="this.style.display='none';startFade();">慢慢消退,检测结束事件</button></p>
- <script>
- (function() {
- var e = document.getElementsByClassName('sample')[0];
- function whichTransitionEvent(){
- var t;
- var el = document.createElement('fakeelement');
- var transitions = {
- 'transition':'transitionend',
- 'OTransition':'oTransitionEnd',
- 'MozTransition':'transitionend',
- 'WebkitTransition':'webkitTransitionEnd'
- }
- for(t in transitions){
- if( el.style[t] !== undefined ){
- return transitions[t];
- }
- }
- }
- var transitionEvent = whichTransitionEvent();
- transitionEvent && e.addEventListener(transitionEvent, function() {
- alert('css3运动结束!我是回调函数,没有使用第三方类库!');
- });
- startFade = function() {
- e.className+= ' hide';
- }
- })();<br></script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0412/272398.html