Vue移入移出詳解

一、基本概念

Vue中的移入移出指的是當一個元素進入或離開頁面時的動畫效果。通常情況下，我們使用CSS動畫來實現這些效果，但是在Vue中，我們可以利用內置的過渡組件輕鬆實現。

Vue實現移入移出的基本流程如下：

<template>
  <transition name="fade">
    <div v-if="show">
      顯示內容
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在上面的代碼中，我們定義了一個名為「fade」的過渡組件，並在「div」中使用「v-if」指令控制組件的顯示與隱藏。在樣式中，我們定義了兩個類「fade-enter-active」和「fade-leave-active」，用於控制進入和離開組件時的過渡效果。同時定義了兩個類「fade-enter」和「fade-leave-to」，用於定義進入和離開時元素的樣式。其中的「opacity」屬性用於控制元素的透明度，實現淡入淡出的效果。

二、多種動畫效果

Vue內置的過渡組件支持多種動畫效果，我們可以根據需要進行使用。

1.過渡類名

Vue內置的過渡類名如下：

1. enter：進入動畫的開始狀態，會與過渡的name屬性連接使用。
2. enter-to：進入動畫的結束狀態，會與過渡的name屬性連接使用。
3. enter-active：進入動畫的總時長狀態，會與過渡的name屬性連接使用。
4. leave：離開動畫的開始狀態，會與過渡的name屬性連接使用。
5. leave-to：離開動畫的結束狀態，會與過渡的name屬性連接使用。
6. leave-active：離開動畫的總時長狀態，會與過渡的name屬性連接使用。

2.CSS Transition

我們可以通過自定義樣式來實現不同的動畫效果，同時，我們也可以使用Vue內置的CSS Transition組件來快速實現常用動畫。

例如下面這個例子：

<template>
  <transition name="slide">
    <div>顯示內容</div>
  </transition>
</template>

<style>
.slide-enter-active {
  transition: all .5s ease;
  position: absolute;
}

.slide-enter {
  transform: translateX(100%);
}

.slide-leave-active {
  transition: all .5s ease;
  position: absolute;
}

.slide-leave-to {
  transform: translateX(-100%);
}
</style>

這裡我們利用Vue的內置組件「transition」實現了一個滑動效果。在樣式中我們為組件定義了名為「slide」的過渡效果，當元素進入頁面時，其位置從右側移動到指定位置（此處為100%），當元素離開頁面時，其位置從原來的位置左側移出視線。如下圖所示：

3.JavaScript Transition

Vue還支持通過JavaScript來控制過渡效果。我們可以在進入或離開動畫開始前或結束後執行特定的函數。例如下面這個例子：

<template>
  <transition
    name="fade"
    v-on:before-enter="beforeEnter"
    v-on:enter="enter"
  >
    <div v-if="show">
      顯示內容
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0;
    },
    enter(el, done) {
      let opacity = 0;
      setTimeout(() => {
        opacity = 1;
        el.style.opacity = opacity;
        done();
      }, 1000);
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
</style>

在這個例子中，我們利用了Vue提供的v-on指令監聽進入和離開動畫的開始和結束狀態。在樣式中，我們依然定義了兩個類名「fade-enter-active」和「fade-leave-active」用於控制動畫效果。

這裡我們通過JavaScript手動設置元素的「opacity」屬性實現了淡入淡出的效果。首先，在進入動畫開始之前，我們將元素的透明度設置為0，在進入動畫開始時，將元素的透明度逐漸變為1。使用setTimeout函數可以實現動畫的延時，保證動畫效果正常進行。

三、總結

本文主要介紹了Vue中移入移出的實現方式。可以根據需要選擇使用CSS Transition、JavaScript Transition以及Vue內置的過渡類名等方式。無論使用哪種方式，都需要注意組件的過渡效果與原有樣式的兼容性，確保動畫效果正常進行。