How can i add a animation to a span using javascript when a letter is guessed correctly in a hangman-CodePudding

I am trying to add a animation to my game when a word is guessed correctly, the below code changes the spans background color to green when a letter is correct and on standard the background color is set to orange (#ff6a00). I have tried to add transform rotate 20 degrees but does not do anything the color property does change to green if the letter = the letter. I am trying to add it to the first if. I don't want the final result to be for it to rotate 20 degrees when the letter is correct, this is just to test if the way I was doing it would work. The end result I want it to flip like a card and slowly reveal the letter. Image of game

get puzzle() {
let puzzle = [];
if (puzzle != null) {
  this.word.forEach((letter) => {
    if (this.guessedLetters.includes(letter)) {
      puzzle.push({
        transform: "rotate(20deg)",
        letter: letter,
        color: "green",
      });
    } else if (letter === " ") {
      puzzle.push({
        letter: letter,
        color: "none",
      });
    } else {
      puzzle.push({
        letter: "*",
        color: "#ff6a00",
      });
    }
  });
  return puzzle;
}

}

CodePudding user response：

You need to set a transition to animate your rotation, you can get examples here.

To support all modern browsers, the following styles should be used for transitions:

-webkit-transition
-moz-transition
transition

and for transforms:

-webkit-transform
-moz-transform
-ms-transform
transform

For example:

div {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}

div:hover {
-webkit-transform: translate(3em,0);
-moz-transform: translate(3em,0);
-o-transform: translate(3em,0);
-ms-transform: translate(3em,0);
transform: translate(3em,0);
}

CodePudding user response：

use CSS for your animation ....there are lots of css rules that will allow you to modify various aspects of the animation....for your case...I'd look specifically at animation-play-state and animation-iteration count

let puzzle = "GUESS ME";
let revealedLetters = ['E','M','G'];
let board = document.querySelector('#board');

for(let a=0;a<puzzle.length;a  ){
  let card = document.createElement('div');
  card.classList.add('card');
  
  if(puzzle[a] == ' '){
    card.classList.add('space');
  }
  if(revealedLetters.includes(puzzle[a])){
    card.classList.add('showLetter');
    card.innerHTML = puzzle[a];
  }
  board.appendChild(card);
}

#board{
 width: 50vw;
 height: 75vh;
 background: black;
}
@keyframes rotateCard{
  to{
    transform: rotateY(180deg);
    background: green;
  }
}
.card{
display: inline-flex;
flex-direction: row;
 margin: 5px;
 width: 50px;
 height: 75px;
 background: blue;
 align-items:center;
 justify-content: center;
 color: transparent;
 transform: rotateY(180deg);
 vertical-align: middle;
}
.space{
  visibility: hidden;
}
.showLetter{
  color: white;
  animation: rotateCard 1s;
  animation-fill-mode: forwards;
}
@keyframes rotateCard{
 to{
  transform: rotateY(0deg);
 }
}

<div id='board'></div>