1. 설치
명령 줄에서 실행합니다.
npm 또는 cnpm을 사용하여 설치
npm install animate.css --save 或 cnpm install animate.css --save
2. 소개
main.js에서 전 세계적으로 소개되었습니다.
import animated from 'animate.css'
Vue.use(animated)
3. 페이지 사용
전환 클래스 이름을 사용자 지정하여 애니메이션 라이브러리의 효과를 사용하고 클래스 이름을 추가합니다 animated. bounceIn, bounceOut은 필수 애니메이션 효과입니다.
<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>
페이지를 열면 효과가 없음을 알 수 있습니다. 다음은 해결책입니다.
4. 구덩이에 밟기
처음 세 부분이 여전히 효과가 없다면 animate.css 버전에 문제가있을 수 있습니다.
직접 설치는 최신 버전이며 vue 공식 웹 사이트에서는 버전 3.5.1을 소개합니다.
버전 변경 :
먼저 제거 :
Npm 또는 cnpm 제거 :
npm uninstall animate.css --save
cnpm uninstall animate.css --save
재설치 :
npm 또는 cnpm 설치 :
npm install [email protected] --save
cnpm install [email protected] --save
설치가 완료되면 프로젝트를 다시 시작하여 문제를 해결하십시오!
다섯. 효과
