CSS3 - 添加类火的动画，并删除在完成类 [英] CSS3 - add class to fire an animation and remove class on completion

问题描述

我有一个div，当我点击它的jQuery增加了其启动动画运行的类。当动画停止（3秒后）我要删除的类，这样就点击再次div时动画将开始。

I have a div and when I click it jquery adds a class which starts an animation running. When the animation stops (after 3 seconds) I want the class to be removed, so that when the div is clicked on again the animation will start over.

这只是测试，只有Chrome浏览器的时刻。

This is only testing and only Chrome browser at the moment.

下面是我的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>

在所有的情况下 - 我的动画在第一次点击运行，但没有后续点击

In all cases - my animation runs on the first click, but not subsequent clicks.

推荐答案

我是使用jQuery的旧版本。

I was using an older version of jquery.

我更新到1.8.0和它的作品。

I updated to 1.8.0 and it works.

这篇关于CSS3 - 添加类火的动画，并删除在完成类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！