Aprender Vue

Capítulo 10. Transición y animación en Vue

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

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 :

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.5);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
  }
}

.button {
  animation: pulse 2s infinite;
  box-shadow: 0px 0px 1px 1px #0000001a;
}

Definimos un efecto de animación simple, pulse, y lo aplicamos a cualquier ...