Vue封裝的過渡與動畫

1.作用：在插入、更新或移除DOM元素時，在合適的時候給元素新增樣式類名。

2.圖示：

3.寫法:

• 準備好樣式:

  • 元素進入的樣式:
    1.v-enter：進入的起點
    2.v-enter-active：進入過程中
    3.v-enter-to：進入的終點

  • 元素離開的樣式:

    1.v-leave：離開的起點
    2.v-leave-active：離開過程中
    3.v-leave-to：離開的終點

• 2.使用<transition>包裹要過度的元素，並配置name屬性:

  <transition name="hello">
  <h1 v-show="isShow">你好啊!</h1>
  </transition>
   
  

• 備註：若有多個元素需要過度，則需要使用:<transition-group>，且每個元愫都要指定key值。

4.第三方CSS動畫庫：Animate.css | A cross-browser library of CSS animations.

<template>
  <div>
    <button @click="isShow =!isShow">顯示/隱藏</button>
    <transition-group
    appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__swing"
    leave-active-class="animate__shakeX"
    >
    <h2 v-show="isShow">你好啊</h2>
  </div>
</template>

<script>
import 'animate.css';
export default {
  name: "text",
  data() {
    return {
      isShow: ture
    };
  },
};
</script>