創建一個按鈕來啓動我的webkit動畫？

Question

我有一個div的卷軸使用webkit旋轉。我用一個數組填充每個卷軸並隨機選擇一個贏家。

問題是我需要一種方法來重新旋轉而不刷新頁面？我將使用「索賠獎金」按鈕將贏家/獎品組合記錄在單獨的陣列中，但是如果不刷新（並重新創建所有陣列）頁面，我無法重新進行重新綁定？

我想我只需要重新加載旋轉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> 

Answer 1

您可以附加動畫屬性一類的名字，而不是IDS。這樣，你可以通過編程＃環-1和＃上安裝的「旋轉」類揭開序幕動畫環2：

#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') });