<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")
应该可以输出
还记得许多年前，我们为一个元素添加有一个动画class之后，你还在用settimeout来延迟下一个动作,这么做过时啦。哪怎么做呢。
不是添加了一个类么，哪动画结束以后来执行这个动作呗。
哪么动画有两种，还是要区别对待的。
1.animation
2.transition
-webkit-animation动画其实有三个事件：
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration
嗯 对 就是这么简单 后面的实际用例我会附上
待更新中。。。
这篇文章写出来以后，朋友反馈过来有兼容性问题。
iOS9一下和安卓4.4一下是不支持的。
因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题，关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。
其他比较好的解决方案还是使用setTimeout去解决这个问题。
https://developer.mozilla.org/en-US/docs/Web/Events/transitionend
注意：每个启用TransitionCSS属性的分别对应独立的transitionend事件
