0

Webkit を使用して回転する div のリールがあります。各リールに配列を設定し、勝者をランダムに選択します。

問題は、ページを更新せずにこれをもう一度スピンする方法が必要ですか? 「賞品を請求する」ボタンを使用して、勝者/賞品の組み合わせを別の配列に記録しますが、ページを更新 (およびすべての配列を再作成) せずに再スピンする方法はありませんか?

スピン div をリロードする必要があると思いますか?

http://jsfiddle.net/U5HDc/

    <div id="rotate1">
        <div id="ring-1" class="ring">
            <div class="poster" style="-webkit-transform: rotateX(0deg) translateZ(300px); ">
                <script>
                    pick_prize();
                    document.write("<p>" + get_prize() + "</p>");
                </script>
4

1 に答える 1

1

ID の代わりにアニメーション プロパティをクラス名に添付できます。そうすれば、#ring-1 と #ring-2 に "spin" クラスをアタッチすることで、プログラムでアニメーションを開始できます。

#ring-1.spin {
    -webkit-animation-name: x-spin-2;
    -webkit-animation-duration: 2s;
}
#ring-2.spin {
    -webkit-animation-name: x-spin;
    -webkit-animation-duration: 1s;
}

キックオフ アニメーション:

$(".ring").addClass('spin');

アニメーションが終了したらスピン クラスを削除して、後で別のアニメーションを開始できるようにします。

$(".ring").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function(){ $(this).removeClass('spin') });
于 2013-08-30T19:30:50.727 に答える