Animar un avión (CSS)
importancia: 5
Muestra la animación como en la imagen a continuación (haz clic en el avión):
- La imagen crece al hacer clic de
40x24pxa400x240px(10 veces más grande). - La animación dura 3 segundos.
- Al final muestra: “¡Listo!”.
- Durante el proceso de animación, puede haber más clics en el avión. No deberían “romper” nada.
CSS para animar tanto width como height:
/* clase original */
#flyjet {
transition: all 3s;
}
/* JS añade .growing */
#flyjet.growing {
width: 400px;
height: 240px;
}Ten en cuenta que transitionend se dispara dos veces, una para cada propiedad. Entonces, si no realizamos una verificación adicional, el mensaje aparecería 2 veces.