1. Installation
Execute in the command line:
Install using npm or cnpm
npm install animate.css --save 或 cnpm install animate.css --save
2. Introduction
Introduced globally in main.js
import animated from 'animate.css'
Vue.use(animated)
3. Page usage
Use the effect of the animation library by customizing the transition class name, add the class name animated, bounceIn, bounceOut are the required animation effects
<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>
Open the page and you will find that there is no effect, the following is the solution
Four. Stepping on the pit
If the first three parts are still ineffective, it may be a problem with the animate.css version.
The direct installation is the latest version, and the vue official website introduces version 3.5.1
Change the version:
Uninstall first:
Npm or cnpm uninstall:
npm uninstall animate.css --save
cnpm uninstall animate.css --save
re-install:
npm or cnpm installation:
npm install [email protected] --save
cnpm install [email protected] --save
After the installation is complete, restart the project to solve the problem!
Five. Effect
