vue實現動畫效果大全

vue要實現動畫很簡單，同時他提供了很多種實現方式，為了快速入門，這里只講一種最簡單實用的方法，就是結合 animate.css 這個css動畫庫。

https://animate.style

准備工作

安裝animate.css

npm install animate.css --save

在main.ts中導入animate.css

import 'animate.css/animate.min.css'

transition

vue封裝了動畫組件，我們可以直接使用，只需要用"<transition>"包裹要添加動畫的元素(或組件)， 這里我們要注意的就是觸發條件：

1. 被包裹組件(或元素)上的v-if的值發生變化
2. 被包裹組件(或元素)上的v-show的值發生變化
3. 動態組件的is值發生變化的時候也會觸發動畫，動態組件在業務代碼中不常見，這里暫時不講，記住這個名詞即可

App.vue

<template>
  <div>
    <button @click="isShow = !isShow">切換</button>

    <transition
      :duration="1000"
      enter-active-class="animate__animated animate__fadeInDown"
      leave-active-class="animate__animated animate__fadeOutUp"
    >
      <p v-if="isShow">hello</p>
    </transition>
  </div>
</template>

<script>
import "animate.css";
import { defineComponent } from "vue";
export default defineComponent({
  data() {
    return {
      isShow: true,
    };
  },
});
</script>

效果

這里的 animate__animated 代表當前元素使用 animate.css 的動畫，這個樣式是animate.css自帶的，后面的animate__fadeInDown是具體的動畫名稱。

更多的動畫樣式名可查看：https://animate.style/

enter-active-class

組件(或元素)的"v-if/v-show"值從"false"變成"true"后，vue會自動給元素增加"enter-active-class"中的樣式名，動畫執行完畢vue會自動刪除元素上添加的"動畫樣式"。

leave-active-class

與"enter-active-class"，在"v-if/v-show"值從"true"變成"false"后，執行類似操作。

duration

通過duration我們可以指定動畫的執行時間。

mode

當"<transition>"下有2個內容的時候，需要控制下動畫觸發時機，不然可能會出現"重疊"等意外。

<template>
  <transition
    :duration="1000"
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp"
  >
    <p v-if="isShow">hello</p>
    <p v-else>你好</p>
  </transition>
</template>

效果

2段文字再點擊切換后同時動畫，這肯定不是我們要的，mode可以控制2個元素的動畫出現順序。

mode=out-in 讓消失動畫先執行，再執行顯示動畫。

反之還有"in-out"，本例顯示是要使用"out-in"：

<template>
  <transition
+   mode="out-in"
    :duration="1000"
    enter-active-class="animate__animated animate__fadeInDown"
    leave-active-class="animate__animated animate__fadeOutUp"
  >
    <p v-if="isShow">hello</p>
    <p v-else>你好</p>
  </transition>
</template>

效果