Vue實作動畫的幾種方式

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
}
           

1. animate.css插件

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

   加入類名時呈現動畫

npm install animate.css --save
           

1. 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({live: false}).init();
    });
  },
</script>
           

1. 原生css動畫