今天重新看了一下bootstrap里面的那些插件，打算写一套简化版的插件，看到里面一个bootstrap-transition.js，不明所以，细看之后才知道是一个判断浏览是否支持transition转换的插件，若支持则在动画结束时执行一些代码。否则使用另外一个事件。
在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.25秒内将元素向右移动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,
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>
接下来，我们为元素多指定一个opacity(透明度）样式属性。
结论是：如果多使用一个样式属性，在每个动画执行的过程中webkitTransitionEnd事件的触发次数将增加一次。也就是说webkitTransitionEnd事件将在元素的每个样式属性值发生改变之后触发一次。
我们也可以使用animationend事件来检测CSS动画是否已经结束，CSS3动画需要用到keyframe才行，这个事件会在动画结束后只触发一次。
兼容代码
由于各个浏览器有不同的前缀，所以使用JavaScript代码时还要检测支持哪种，下面分享一个代码。
/* From Modernizr */ 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]; } } } /* Listen for a transition! */ var transitionEvent = whichTransitionEvent(); transitionEvent && e.addEventListener(transitionEvent, function() { console.log('Transition complete! This is the callback, no library needed!'); });
我们可以通过jQuery里面的one函数来指定只执行一次。
$(".button").click(function(){
$(this).addClass("animate");
$(this).one(transitionEvent,
function(event) {
alert("The transition has ended!");
$(this).removeClass("animate");
});
});
参考：
http://www.cnblogs.com/qgd87/p/3386024.html
https://davidwalsh.name/css-animation-callback
