CSS3 - 添加类以触发动画并在完成时删除类答案

【问题标题】：CSS3 - add class to fire an animation and remove class on completionCSS3 - 添加类以触发动画并在完成时删除类
【发布时间】：2012-07-31 20:37:26
【问题描述】：

我有一个 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>

在所有情况下 - 我的动画在第一次点击时运行，而不是后续点击。

【问题讨论】：

这可能是相关的 => stackoverflow.com/questions/4062105/…
您运行的是哪个版本的 Chrome/Safari/Webkit？您的解决方案在 JSFiddle 中对我很有效：jsfiddle.net/BYfDZ
@Pete 您可能需要注意，webkitAnimationEnd 似乎在动画结束几秒钟后触发。因此，当您对其进行测试时，它可能看起来没有响应。
运行 Chrome 21.0.1180.60 beta-m。我等了 10 秒，但在第一次之后仍然没有开火。
也尝试恢复到非 beta 版本，但仍然无法正常工作 (21.0.1180.60 m)。

标签： jquery animation css addclass removeclass

【解决方案1】：

你也可以用跨浏览器的方式来做：

$('#spinButton').bind('animationend webkitAnimationEnd MSAnimationEnd oAnimationEnd', function (e) {
    $('#shape').removeClass('spin360');
});

【讨论】：

【解决方案2】：

我使用的是旧版本的 jquery。

我更新到 1.8.0 并且可以正常工作。

【讨论】：

【解决方案3】：

// 工作正常，但是您确实离开了我们的标准声明 //所以你的代码只能在 Chrome、Safari、Opera 上运行

/* Chrome、Safari、Opera */
@-webkit-keyframes 旋转 { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-360deg); } }

/* 标准语法 */
@keyframes 旋转 { 0% { -webkit-transform: rotateX(0); } 100% { -webkit-transform: rotateX(-360deg); } }

【讨论】：

我知道，这就是为什么我说“这只是测试，目前只有 Chrome 浏览器。”。