Question

我有这个小项目，我正在闲暇时间工作。这是关于洗牌的简短CSS动画。在其中一个动画中，我有5张卡并排放置。我的javascript函数应该随机选择2张牌并通过操作样式表来切换它们。问题是在第一次切换之后的任何时候它可能无法完成动画，完全停止或完成它应该。

这是给我这个问题的功能。我不得不为它的大小道歉。我认为既然问题在于这个功能我应该完整地发布它。我希望我的评论能让你更好地阅读。

function SwitchElements(){

// For each card in the tarotDeck there is a CSS tarotRule.
for(var index = 0; index < tarotDeck.length; index++)
{
    // Remove any animation properties from the cards.
    if(tarotRules[index].selectorText == ".Container > .TarotCard:nth-child("+(index+1)+")")
    {
        tarotRules[index].style.removeProperty(prefix+"animation");
        tarotRules[index].style.removeProperty(prefix+"animation-play-state");
    }
    // Remove any listeners that use SwitchElements() as a handler.
    tarotDeck[index].removeEventListener("animationend", SwitchElements, false);
}

// Delete the keyframes SlideLeft and SlideRight from the stylesheet.
var mainStyleRules = mainStyleSheet.cssRules;
for(var index = 0; index < mainStyleRules.length; index++)
{   
    if(mainStyleRules[index].name == "SlideLeft" || mainStyleRules[index].name == "SlideRight")
    {
        mainStyleSheet.deleteRule(index);
        index--;
    }
}

// There is % chance to escape this method.
var count = Math.floor((Math.random()*10)+0);
if(count >= 7)
{
    animationIndex++;
    return ShuffleTime();
}

// Find two distinct indexes to swap around. Randomize the indexes until they
// are distinct. Let randomIndex1 be the lower index (left card).
var randomIndex1 = 0;
var randomIndex2 = 0;
while(randomIndex1 == randomIndex2)
{
    randomIndex1 = Math.floor((Math.random()*tarotDeck.length)+0);
    randomIndex2 = Math.floor((Math.random()*tarotDeck.length)+0);
}
if(randomIndex1 > randomIndex2)
{
    var temp = randomIndex1;
    randomIndex1 = randomIndex2;
    randomIndex2 = temp;
}

// Find the left position of the two cards. Order is an array of [0,1,2,3,4] that signifies the
// on-screen position of the cards (The order of the divs never actually change).
var leftCardPosition = Position(order[randomIndex1]);
var rightCardPosition = Position(order[randomIndex2]);
// Create keyframes specifically for those two cards that are to be switched and add them to the stylesheet.
var slideLeft = "@"+prefix+"keyframes SlideLeft {0% { left: "+leftCardPosition+"px; top: 0px; } 50% {top: 350px;} 100%{left: "+rightCardPosition+"px; top: 0px;}}";
var slideRight = "@"+prefix+"keyframes SlideRight {0% { left: "+rightCardPosition+"px; top: 0px; } 50% {top: -350px;} 100%{left: "+leftCardPosition+"px; top: 0px;}}";
mainStyleSheet.insertRule(slideLeft,mainStyleSheet.cssRules.length);
mainStyleSheet.insertRule(slideRight,mainStyleSheet.cssRules.length);

// Set up the animation properties and set change the position of the cards sor they stay
// in their place after the animation is over.
tarotRules[randomIndex1].style.setProperty(prefix+"animation-play-state", "paused", null);
tarotRules[randomIndex1].style.setProperty(prefix+"animation", "SlideLeft 0.75s", null);
tarotRules[randomIndex1].style.setProperty("left", rightCardPosition+"px", null);
tarotRules[randomIndex2].style.setProperty(prefix+"animation-play-state", "paused", null);
tarotRules[randomIndex2].style.setProperty(prefix+"animation", "SlideRight 0.75s", null);
tarotRules[randomIndex2].style.setProperty("left", leftCardPosition+"px", null);

//Rearrange the values in order to reflect the changes made to the position of the cards.
var temp = order[randomIndex1];
order[randomIndex1] = order[randomIndex2];
order[randomIndex2] = temp;

// There is only a need for one eventListener. Call SwitchElements() when the animation is over.
tarotDeck[randomIndex2].addEventListener("animationend", SwitchElements, false);

// Run the animation
tarotRules[randomIndex1].style.setProperty(prefix+"animation-play-state", "running", null);
tarotRules[randomIndex2].style.setProperty(prefix+"animation-play-state", "running", null);

}

我确实有一些想法可能是导致这个问题的原因但我不想说因为我对Javascript和CSS缺乏经验。即使与此问题无关，任何建议都会受到欢迎。

我的CSS动画有时会失败

0 个答案: