Vue实现动画的几种方式

Posted 2022-07-01 223zzm

1. vue内置组件transition

　　元素出现和消失都呈现动画

<!-- 将要使用动画的内容放在transition里即可 -->
<transition name="fade">
  <div v-show="show"></div>
</transition>

.fade-enter-active,
.fade-leave-active 
  transition: opacity .5s

.fade-enter,
.fade-leave-active 
  opacity: 0

2. animate.css插件

　　参照https://github.com/daneden/animate.css

　　加入类名时呈现动画

npm install animate.css --save

import animate from ‘animate.css‘

<div class="animated bounce delay-2s faster">Example</div>

3. wow.js

　　需引入animate，滚动到元素的位置展现动画

npm install wowjs --save-dev

<script>
import  WOW  from "wowjs"
import ‘animate.css‘
export default 
  mounted() 
    window.addEventListener("scroll", this.handleScroll);
    this.$nextTick(() => 
      new WOW().init();
    );
  ,
</script>

<div class="wow rollIn" />

4. 原生css动画