Javascript webkitAnimation如何结束工作？

我正在使用css3，在使用webkit旋转播放动画之后，我尝试调用一个函数。但是，该函数在动画开始时调用，而不是在动画开始后调用。这是我的密码：

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:

任何帮助都将不胜感激

谢谢

问题出在这里：

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

请注意，您可以立即调用

displayPrize（prizesavaailable[randomGenerator].image）

，但是需要传递函数引用。试试这个：

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

---

谢谢，在动画结束之前停止了图像显示。但动画结束后也不会显示图像。你知道为什么吗？谢谢。因为你没有展示它。以前显示它是因为您调用了

displayPrize（PrizeSavaailable[randomGenerator].image）。如果需要执行此操作，可以在设置
start.addEventListener（'webkitAnimationEnd'，…
之前再次调用此函数。
start.addEventListener('webkitAnimationEnd', function() {
    displayPrize(prizesAvailable[randomGenerator].image);
}, false);