HTML and CSS Reference
In-Depth Information
5. Here, we have the long batle animaion sequence. It starts by showing the
opponent's card. After the opponent's card is in, it starts the blaze and shake
animaions one-by-one, accordingly:
var beginBattleAnimation = function() {
opponentCard.node.classList.remove('out');
opponentCard.node.classList.add('in');
console.log("Power of opponent card: ",
opponentCard.power());
opponentCard.node.onTransitionEnd(function(e) {
//only execute the attack animation when opponent at
'in' state.
if (!e.target.classList.contains('in')) return;
var blazeLeft =
document.querySelector('.blaze.toward-left');
blazeLeft.classList.add('attack');
blazeLeft.onAnimationEnd(function(e){
e.target.classList.remove('attack');
opponentCard.node.classList.add('shake');
opponentCard.node.onAnimationEnd(function(e){
opponentCard.node.classList.remove('shake');
var blazeRight =
document.querySelector('.blaze.toward-right');
blazeRight.classList.add('attack');
blazeRight.onAnimationEnd(function(e){
e.target.classList.remove('attack');
selectedCard.node.classList.add('shake');
selectedCard.node.onAnimationEnd(function(e){
selectedCard.node.classList.remove('shake');
}); // player shake end handler
}); // blaze right end handler
}); // opponent shake end handler
}); // blaze left end handler
}); // opponent transition end handler
} // end beginBattleAnimation
 
Search WWH ::




Custom Search