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

时间:2012-08-02 19:57:00

标签: jquery animation css3 addclass removeclass

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

在所有情况下 - 我的动画在第一次点击时运行,但不会在后续点击中运行。

3 个答案:

答案 0 :(得分:5)

您也可以采用跨浏览器方式:

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

答案 1 :(得分:1)

我使用的是旧版本的jquery。

我更新到1.8.0并且有效。

答案 2 :(得分:0)

//工作正常,但你确实离开了我们的标准声明 //所以你的代码只适用于Chrome,Safari,Opera

  

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

     

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