<script src="scripts/jquery.min.js"></script>
<head>
<style>
div { width: 100px height: 100px background: blue transition: width 1s -moz-transition: width 1s /* Firefox 4 */ -webkit-transition: width 1s /* Safari and Chrome */ -o-transition: width 1s /* Opera */ }
div:hover { width: 300px }
</style>
</head>
<body>
<div id="demo">
</div>
<br />
<script type="text/javascript">
$("div").one("webkitTransitionEnd otransitionend transitionend",function(){
alert("11")
})
</script>
</body>
</html>
我用我的代码测试正常，，，你的话，懒得打，，
还有你的你的ALERT，输出的11是变量吗？？？为什么没有""
alert("11")
应该可以输出
1，看代码参考。2，animation-fill-mode : none | forwards | backwards | both
none：不改变默认行为。forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。
<!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,
el = document.createElement('surface'),
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运动结束！我是回调函数，没有使用第三方类库！')
e. removeEventListener(transitionEvent,arguments.callee,false)//销毁事件
})
startFade = function() {
e.className+= ' hide'
}
})()
</script>
</body>
</html><br><br>//兼容性 详情
