Question

我正在使用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：

.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;
}

非常感谢任何帮助。

三江源

Answer 1

问题在于：

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

请注意，您立即调用displayPrize(prizesAvailable[randomGenerator].image)，但需要传递函数引用。试试这个：

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

webkitAnimation End如何工作？

1 个答案: