改變或生成，然後刪除css3關鍵幀

我目前正在與sencha一個項目。在這個項目中，我有一個旋轉的'wheeloffortune'輪子，旋轉到輪子的某個部分以獲得獎勵。改變或生成，然後刪除css3關鍵幀

我之前用一些javascript做了這個，我創建了切換div的css類的時間間隔，但那個效果不好。

我現在想用CSS3動畫，我有以下CSS來做到這一點：

@-webkit-keyframes rotater { 
    from { 
     -webkit-transform: rotate(0deg); 
    } 
    to { 
     -webkit-transform: rotate(3600deg); 
    } 
} 

.css3-rotaterFull { 
    -webkit-animation-name: rotater; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function:ease-out; 
    -webkit-animation-duration: 15s; 
}

，但我需要它旋轉到一定角度是可變的。爲此我需要能夠在

to { 
    -webkit-transform: rotate(3600deg); 
}

部分設置成度的可變數目在我的類添加到div

如何做到這一點任何想法？

來源

2012-11-23 SnK

使用CSSOM：http://dev.w3.org/csswg/cssom/

function rotate(deg) { 
    var elem = document.getElementById('wheel'); 
    var lastStyleSheet = document.styleSheets[document.styleSheets.length - 1]; 
    var rule = '@-webkit-keyframes menuBreadcrumbAnimation {\ 
      0% {\ 
       -webkit-transform: rotate(0deg);\ 
      } 100% {\ 
       -webkit-transform: rotate(' + deg + 'deg);\ 
      }'; 

    function rotateAnimationEnd() { 
     lastStyleSheet.removeRule(lastStyleSheet.length); 
     elem.removeEventListener('webkitAnimationEnd', rotateAnimationEnd, false); 
    }; 

    lastStyleSheet.insertRule(rule, lastStyleSheet.rules.length); 
    elem.addEventListener('webkitAnimationEnd', rotateAnimationEnd, false); 
    elem.classList.add('css3-rotaterFull'); 
};

一旦你知道結局的程度是什麼，它傳遞給這個函數。它將獲取文檔中的最後一個樣式表，創建一個插入了動態度的規則，然後將該規則插入到樣式表中，並將適當的類添加到元素中，以便使用動畫。

webkitAnimationEnd偵聽器可以在動畫完成後從樣式表中刪除規則，以便規則不會持續建立，並且也會移除webkitAnimationEnd偵聽器本身，因此它不會干擾下一次旋轉。

來源

2012-11-23 18:55:28 skyline3000

把它放在一個樣式標籤，以便能夠得到/設置它與getElementById('').innerHTML;。

來源

2015-09-20 03:26:53 xzipex92

改變或生成，然後刪除css3關鍵幀

回答

相關問題