1. Instalación
Ejecutar en la línea de comando:
Instalar usando npm o cnpm
npm install animate.css --save 或 cnpm install animate.css --save
2. Introducción
Introducido globalmente en main.js
import animated from 'animate.css'
Vue.use(animated)
3. Uso de la página
Utilice el efecto de la biblioteca de animación personalizando el nombre de la clase de transición, agregue el nombre de la clase animated, bounceIn, bounceOut son los efectos de animación necesarios
<template>
<div class="hello">
<h1>使用Animate.css动画库:</h1>
<button @click="showAnimate = !showAnimate">Toggle render</button>
<transition
name="custom-classes-transition"
enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut"
>
<p v-if="showAnimate">hello</p>
</transition>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
showAnimate: true,
};
},
};
</script>
<style lang="scss" scoped>
</style>
Abra la página y encontrará que no hay ningún efecto, la siguiente es la solución
Cuatro. Pisar el hoyo
Si las tres primeras partes aún no son efectivas, puede ser un problema con la versión animate.css.
La instalación directa es la última versión, y el sitio web oficial de vue presenta la versión 3.5.1
Cambiar la versión:
Desinstale primero:
Desinstalación de Npm o cnpm:
npm uninstall animate.css --save
cnpm uninstall animate.css --save
reinstalar:
Instalación de npm o cnpm:
npm install [email protected] --save
cnpm install [email protected] --save
Una vez completada la instalación, reinicie el proyecto para resolver el problema.
Cinco. Efecto
