4

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>

いずれの場合も、アニメーションは最初のクリックで実行されますが、その後のクリックでは実行されません。

4

3 に答える 3

1

古いバージョンのjqueryを使用していました。

1.8.0 に更新しましたが、動作します。

于 2012-08-11T18:43:03.630 に答える