我有一个 div，当我单击它时，jquery 添加了一个开始运行动画的类。当动画停止时（3 秒后），我希望删除该类，这样当再次单击 div 时，动画将重新开始。
这只是测试，目前只有 Chrome 浏览器。
这是我的 CSS3：
.spin360
{
-webkit-animation-name: spin;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes spin
{
0% { -webkit-transform: rotateX(0); }
100% { -webkit-transform: rotateX(-360deg); }
}
这是我的脚本：
<script type="text/javascript">
$(document).ready(function () {
$('#spinButton').click(function () {
$('#shape').addClass('spin360');
});
});
</script>
这是我尝试过的：
<script type="text/javascript">
$(document).ready(function () {
$('#spinButton').click(function () {
$('#shape').addClass('spin360').on('webkitAnimationEnd', function () {
$('#shape').removeClass('spin360');
});
});
});
</script>
和
<script type="text/javascript">
$(document).ready(function () {
$('#spinButton').click(function () {
$('#shape').addClass('spin360');
});
$('#spinButton').addEventListener('webkitAnimationEnd', function (e) {
$('#shape').removeClass('spin360');
});
});
</script>
在所有情况下 - 我的动画在第一次点击时运行，而不是后续点击。