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