Vue transition过渡组件详解

Vue提供了过渡组件<transition>和<transition-group>，用于在元素插入或移出页面中时添加过渡效果。<transition>用于单个元素，<transition-group>用于多个相同类型的元素。这篇文章将详细讲解如何使用这两个组件，以及一些常见的用法和示例。

1. 基本用法

让我们看一个最简单的过渡效果：

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    }
  }
}
</script>

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

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

上面的代码中，我们展示了一个“Hello World”文本，点击按钮之后，文本将会渐入或渐出。这个过渡效果通过<transition>组件实现，设置了名为“fade”的过渡名称，定义了进入和离开时的类名，控制相应的过渡效果。其中，.fade-enter-active控制进入过渡的效果，.fade-leave-active控制离开过渡的效果，.fade-enter控制进入动画开始前的初始状态，.fade-leave-to控制离开动画结束后的结束状态。

2. 过渡类型

Vue提供了几种过渡类型：平移、缩放和透明度。这些类型可以通过<transition>的type属性选择，默认为"transition"。我们来看一下不同过渡类型的效果：

<template>
  <div>
    <h3>平移</h3>
    <button @click="toggle('translate')">Toggle</button>
    <transition name="translate" type="transition">
      <p v-if="show">Hello World</p>
    </transition>

    <h3>缩放</h3>
    <button @click="toggle('scale')">Toggle</button>
    <transition name="scale" type="animation">
      <p v-if="show">Hello World</p>
    </transition>

    <h3>透明度</h3>
    <button @click="toggle('opacity')">Toggle</button>
    <transition name="opacity" type="transition">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggle(name) {
      this.type = name
      this.show = !this.show
    }
  }
}
</script>

<style>
.translate-enter-active,
.translate-leave-active {
  transition: transform 1s;
}

.translate-enter,
.translate-leave-to {
  transform: translateX(100%);
}

.scale-enter-active,
.scale-leave-active {
  animation: scale 1s;
}

.scale-enter,
.scale-leave-to {
  transform: scale(0);
  opacity: 0;
}

.opacity-enter-active,
.opacity-leave-active {
  transition: opacity 1s;
}

.opacity-enter,
.opacity-leave-to {
  opacity: 0;
}
</style>

代码中包含了三种过渡类型的效果。<transition>组件分别设置了不同的过渡名称和进入/离开的类名，并定义相应的CSS属性，控制不同过渡类型的效果。

3. 各种生命周期

当一个元素进入或离开时，<transition>组件会触发一系列生命周期钩子函数（Hooks）。这些钩子函数允许我们在过渡的各个阶段进行一些自定义操作。具体的生命周期钩子函数如下：

before-enter
enter
after-enter
enter-cancelled
before-leave
leave
after-leave
leave-cancelled

我们来看一个例子，演示如何使用生命周期钩子函数完成一些自定义操作。

<template>
  <div>
    <button @click="toggle">Toggle</button>
    <transition name="fade" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    toggle() {
      this.show = !this.show
    },
    beforeEnter(el) {
      el.style.opacity = 0
      el.style.height = 0
    },
    enter(el, done) {
      el.style.transition = "opacity 0.5s, height 0.5s"
      el.style.opacity = 1
      el.style.height = "auto"
      done()
    },
    afterEnter(el) {
      el.style.transition = ""
    },
  }
}
</script>

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

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

上面的代码中，我们使用了beforeEnter、enter和afterEnter生命周期钩子函数，设置进入时元素的初始状态、进入的过渡效果和进入完成之后的最终状态。这些函数会在进入过渡的各个阶段被调用，允许我们在过渡过程中进行不同的操作。

4. 过渡组件的常见问题

在使用过渡组件时，可能会遇到一些常见问题，我们来一一解决：

4.1 过渡元素无法居中

在过渡元素的父级元素上设置样式text-align: center即可解决。

4.2 动态改变过渡模式无法生效

当动态改变过渡模式时，需要使用<transition>组件的mode属性，手动重置过渡状态，否则过渡会失效。示例代码如下：

<template>
  <div>
    <button @click="toggle(mode)">Toggle</button>
    <transition :name="name" :mode="mode">
      <p v-if="show">Hello World</p>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      name: "fade",
      mode: "out-in"
    }
  },
  methods: {
    toggle(mode) {
      this.mode = mode
      this.show = !this.show
      this.$nextTick(() => {
        this.$refs.transition.reset()
      })
    },
  }
}
</script>

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

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

在上面的代码中，我们动态改变过渡模式，同时手动重置过渡状态，并添加了ref指令，指向<transition>组件，以获取reset()方法，在下次切换时恢复初始状态，确保过渡效果能够生效。