webkitAnimation結束如何工作？

我正在使用css3，並且在我使用webkit旋轉播放動畫後，我試圖調用一個函數。但是，該功能在動畫開始時被調用，而不在其後。這裏是我的代碼：webkitAnimation結束如何工作？

的Javascript：

function winPrize() { 

    var prizesAvailable = []; 
    prizesAvailable.push({prize: "red", location: 2171.25, image: "red-prize"}); 
    prizesAvailable.push({prize: "blue", location: 2193.75, image: "blue-prize"}); 
    prizesAvailable.push({prize: "yellow", location: 2216.25, image: "yellow-prize"}); 
    prizesAvailable.push({prize: "orange", location: 2238.75, image: "orange-prize"}); 
    prizesAvailable.push({prize: "red", location: 2261.25, image: "red-prize"}); 

    var randomGenerator = Math.floor((Math.random()*6)); 


    var cssAnimation = document.createElement('style'); 
     cssAnimation.type = 'text/css'; 

    var rule1 = document.createTextNode('@keyframes spin-the-wheel {'+ 
       'from { transform: rotate(0deg); }'+ 
       'to { transform: rotate(' + prizesAvailable[randomGenerator].location + 'deg); }'+ 
       '}'); 
    var rule2 = document.createTextNode('@-webkit-keyframes spin-the-wheel {'+ 
       'from { transform: rotate(0deg); }'+ 
       'to { transform: rotate(' + prizesAvailable[randomGenerator].location + 'deg); }'+ 
       '}'); 
    cssAnimation.appendChild(rule1); 
    cssAnimation.appendChild(rule2); 
    document.getElementsByTagName("head")[0].appendChild(cssAnimation); 

    var start = document.getElementById("wheelContainer"); 
    start.className = start.className + " containerSpin"; 

    start.addEventListener('webkitAnimationEnd', 
      displayPrize(prizesAvailable[randomGenerator].image), false); 
} 

function displayPrize(prizes) { 

    var prizeImage = document.getElementById(prizes); 
    prizeImage.className = prizeImage.className + " show"; 

}

CSS：

.containerSpin { 
    animation-duration: 10s; 
    animation-name: spin-the-wheel; 
    animation-timing-function: ease-out; 
    -webkit-animation-duration: 10s; 
    -webkit-animation-name: spin-the-wheel; 
    -webkit-animation-timing-function: ease-out; 
}

任何幫助將不勝感激。

三江源

來源

2014-01-29 Lilu Patel

這裏的問題是：

你調用 displayPrize(prizesAvailable[randomGenerator].image)馬上

start.addEventListener('webkitAnimationEnd', 
    displayPrize(prizesAvailable[randomGenerator].image), false);

但是請注意，你需要傳遞函數引用。試試這個：

start.addEventListener('webkitAnimationEnd', function() { 
    displayPrize(prizesAvailable[randomGenerator].image); 
}, false);

來源

2014-01-29 07:15:19 dfsq

Thankyou，停止動畫結束前的圖像顯示。但動畫結束後圖像也不顯示。你知道爲什麼嗎？謝謝。 –

因爲你沒有顯示它。之前它顯示是因爲您調用了'displayPrize（prizesAvailable [randomGenerator] .image）;'。如果你需要這樣做，你可以在設置'start.addEventListener（'webkitAnimationEnd'，...''之前再次調用這個函數。 – dfsq

webkitAnimation結束如何工作？

回答

相關問題