Vue es un marco front-end popular, y la implementación de la animación de transición es una característica importante. En Vue, el uso de animaciones de transición puede proporcionar a los usuarios una experiencia de usuario más amigable. A continuación, les presentaré cómo implementar la animación de transición en Vue.
1. ¿Sabes qué es la animación de transición?
La animación de transición se refiere a un efecto de animación que hace que el cambio se vea más suave y natural al agregar efectos de transición cuando un elemento DOM cambia de un estado a otro. En Vue, las animaciones de transición se pueden aplicar a los siguientes escenarios:
-
Mostrar y ocultar elementos
-
Agregar o eliminar elementos dinámicamente
-
cambio en la posición del elemento
2. Método de implementación de la animación de transición Vue
2.1 transiciones CSS
Vue proporciona transition componentes para admitir animaciones de transición. Podemos envolver un componente fuera del elemento que necesita aplicar la animación de transición transition y realizar el efecto de la animación de transición configurando el estilo CSS o vinculando la clase dinámica.
Las animaciones de transición de Vue se implementan agregando nombres de clase CSS. Podemos controlar la visualización y ocultación de elementos agregando v-if o instrucciones para elementos que necesitan transición y luego usar componentes para establecer efectos de animación.v-showtransition
Permítanme escribir un ejemplo para su referencia, agregaré un efecto de animación de transición al botón:
<template>
<button @click="show=!show">Toggle</button>
<transition name="fade">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>En las ideas de código anteriores, usamos instrucciones en transition los elementos envueltos para controlar la visualización y ocultación de elementos. Al mismo tiempo, agregamos una propiedad al componente y usamos estilos CSS para definir el efecto de la animación de transición. Entre ellos, y representan respectivamente la animación de transición al entrar y salir, y y representan el estilo del elemento al entrar y salir respectivamente.div v-iftransition name .fade-enter-active.fade-leave-active .fade-enter.fade-leave-to
2.2 Transición JS
Además de usar transiciones CSS, las transiciones JavaScript también se pueden usar en Vue para lograr efectos de animación. La ventaja de la transición JS sobre la transición CSS es que puede controlar la animación de transición de manera más flexible.
Es diferente de la transición de CSS, la transición de Javascript puede controlar la animación de transición de manera más flexible y puede lograr efectos más ricos. Vue proporciona funciones de enlace de eventos que nos permiten personalizar los efectos de las animaciones de transición.
Las siguientes funciones de enlace de eventos se proporcionan en Vue:
-
before-enter -
enter -
after-enter -
enter-cancelled -
before-leave -
leave -
after-leave -
leave-cancelled
Podemos usar las propiedades transition del componente mode para establecer el modo de transición.Si se usa la propiedad mode , Vue llamará automáticamente a la función de enlace correspondiente, y podemos personalizar el efecto de transición a través de estas funciones de enlace.
La siguiente es una demostración de demostración que escribí basada en la transición JS, agregaremos una animación de transición personalizada al botón:
<template>
<button @click="show=!show">Toggle</button>
<transition :css="false" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<div v-if="show">Hello, World!</div>
</transition>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
beforeEnter(el) {
el.style.opacity = 0;
el.style.transformOrigin = 'left';
},
enter(el, done) {
anime({
targets: el,
opacity: 1,
translateX: [20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
},
leave(el, done) {
anime({
targets: el,
opacity: 0,
translateX: [-20, 0],
easing: 'easeInOutQuad',
duration: 500,
complete: done
});
}
}
};
</script> En la página de inicio anterior, deshabilitamos la transición CSS configurando la propiedad transition del componente en , y luego usamos funciones de enlace como , y , para personalizar la animación de transición. En este código de muestra, usamos la biblioteca de animación de terceros Anime.js para realizar el efecto de animación cuando el elemento entra y sale Al mismo tiempo, una vez que se completa la animación, debemos llamar manualmente a la función para notificar a Vue que la animación de transición se ha completado.css false before-enterenter leaveanime done
3. Resumir
A través de la introducción de este artículo que escribí, puede aprender más sobre el concepto básico de la animación de transición de Vue y dominar cómo implementar la animación de transición en Vue. Ya sea que use transiciones de CSS o transiciones de JavaScript, puede ayudarnos a brindarles a los usuarios una experiencia más fácil de usar.