Skip to Main Content
Aprender Vue
book

Aprender Vue

by Maya Shavin
September 2024
Intermediate to advanced content levelIntermediate to advanced
350 pages
8h 22m
Spanish
O'Reilly Media, Inc.
Book available
Content preview from Aprender Vue

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 :

@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 ...

Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Patrones de comunicación

Patrones de comunicación

Jacqui Read
Programación de ordenadores cuánticos

Programación de ordenadores cuánticos

Eric R. Johnston, Nic Harrigan, Mercedes Gimeno-Segovia

Publisher Resources

ISBN: 9781098187835Supplemental Content