Capítulo 10. Transición y animación en Vue
Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: translation-feedback@oreilly.com
Hemos explorado todos los aspectos cruciales para construir una aplicación Vue que funcione, incluyendo el manejo de rutas y el flujo de datos con una adecuada gestión de estados. Este capítulo explorará una característica exclusiva de Vue para mejorar la experiencia del usuario: la animación y las transiciones, utilizando componentes de transición, ganchos y CSS.
Comprender las transiciones CSS y las animaciones CSS
Las animaciones CSS son los efectos visuales de un cambio de estado en un elemento o componente concreto, sin límite en el número de estados. Una animación CSS puede iniciarse automáticamente y entrar en un bucle sin activación explícita. En cambio, la transición CSS es una animación que responde a un cambio entre dos estados solamente, de medio a hover para un botón o de oculto a visible para un tooltip. Para definir una animación CSS, a menudo utilizamos la regla @keyframes y luego la aplicamos al elemento de destino utilizando la propiedadanimation propiedad. Por ejemplo, podemos definir un efecto de animación simple para unbotón :
@keyframespulse{0%{box-shadow:0000pxrgba(0,0,0,0.5);}100%{box-shadow:00020pxrgba(0,0,0,0);}}.button{animation:pulse2sinfinite;box-shadow:0px0px1px1px#0000001a;}
Definimos un efecto de animación simple, pulse, y lo aplicamos a cualquier ...