Estoy tratando de agregar una animación a mi juego cuando una palabra se adivina correctamente, el siguiente código cambia el color de fondo a verde cuando una letra es correcta y, de manera estándar, el color de fondo se establece en naranja (#ff6a00). He intentado agregar transformar rotar 20 grados pero no hace nada, la propiedad de color cambia a verde si la letra = la letra. Estoy tratando de agregarlo al primero si. No quiero que el resultado final sea que gire 20 grados cuando la letra sea correcta, esto es solo para probar si la forma en que lo estaba haciendo funcionaría. El resultado final quiero que se voltee como una carta y revele lentamente la letra. imagen del juego
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; }}
Debe establecer una transición para animar su rotación, puede obtener ejemplos aquí .
Para admitir todos los navegadores modernos, se deben usar los siguientes estilos para las transiciones:
-webkit-transition -moz-transition transitiony para transformadas:
-webkit-transform -moz-transform -ms-transform transformPor ejemplo:
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); }