Vue 巧用过渡效果(小结)攻略

为什么要使用过渡效果？

在 Vue 中，数据驱动渲染界面是一种非常方便的方式，但是如果只是简单地更新 DOM，可能会让用户感觉到突兀。如果加上一些动画效果，这些更新就会更加平滑自然，提升用户体验。

Vue 过渡效果是如何工作的？

Vue 过渡效果是通过 transition 组件和 css 实现的。当组件的可见性被改变时，transition 组件会添加一些类名，让我们可以用 css 来设置动画效果。

transition 组件一共定义了 6 个类名，分别是：

v-enter: 进入过渡的开始状态，此时元素还没有被插入到 DOM 中。
v-enter-active: 进入过渡的活动状态，此时元素正在进行过渡动画。
v-enter-to: 进入过渡的结束状态，此时过渡动画已经结束且元素已经被插入到 DOM 中。
v-leave: 离开过渡的开始状态，此时元素还没有被移除。
v-leave-active: 离开过渡的活动状态，此时元素正在进行过渡动画。
v-leave-to: 离开过渡的结束状态，此时过渡动画已经结束且元素已经被移除。

如何使用过渡效果？

使用过渡效果非常简单，只需要在组件的根元素上添加 transition 组件即可。

以下是一个使用 fade 过渡效果的例子：

<template>
  <div>
    <button @click="show=!show">Toggle</button>
    <transition name="fade">
      <div v-if="show">Hello world!</div>
    </transition>
  </div>
</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 的类名来定义过渡效果，并在 transition 组件中添加了 name 属性。当点击按钮时，show 的值会被改变，从而触发组件的切换。

Vue 过渡效果的常见用法

在使用 transition 组件时，通常有以下几种用法：

使用过渡类名

使用 name 属性来定义过渡类名，然后在 style 标签中定义相应的过渡动画。

<template>
  <div>
    <button @click="show=!show">Toggle</button>
    <transition name="fade">
      <div v-if="show">Hello world!</div>
    </transition>
  </div>
</template>

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

使用 JavaScript 钩子函数

可以通过 JavaScript 钩子函数来处理过渡效果，例如监听过渡开始和结束时的事件。

<template>
  <div>
    <button @click="show=!show">Toggle</button>
    <transition @before-enter="beforeEnter" @enter="enter" @leave="leave">
      <div v-if="show">Hello world!</div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    }
  },
  methods: {
    beforeEnter(el) {
      el.style.opacity = 0
    },
    enter(el, done) {
      let opacity = 0
      let timer = setInterval(() => {
        opacity += 0.1
        el.style.opacity = opacity
        if (opacity >= 1) {
          clearInterval(timer)
          done()
        }
      }, 50)
    },
    leave(el, done) {
      let opacity = 1
      let timer = setInterval(() => {
        opacity -= 0.1
        el.style.opacity = opacity
        if (opacity <= 0) {
          clearInterval(timer)
          done()
        }
      }, 50)
    }
  }
}
</script>

在上面的例子中，我们使用了 @before-enter、@enter 和 @leave 这三个事件监听器来处理过渡效果，其中：

@before-enter 事件会在元素进入过渡之前触发，此时可以设置元素的初始状态。
@enter 事件会在元素进入过渡的时候触发，这里我们可以使用 setInterval 来模拟动画效果，并在动画结束时调用 done 方法。
@leave 事件会在元素离开过渡的时候触发，处理方式和 @enter 事件类似。

使用第三方动画库

如果想要使用更复杂、更高级的动画效果，可以使用第三方动画库，例如 Animate.css。

<template>
  <div>
    <button @click="show=!show">Toggle</button>
    <transition enter-active-class="animated fadeInDown" leave-active-class="animated fadeOutUp">
      <div v-if="show">Hello world!</div>
    </transition>
  </div>
</template>

<script>
import 'animate.css'

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

在上面的例子中，我们使用了 Enter-active-class 和 Leave-active-class 属性来设置过渡类名，然后导入了 Animate.css 动画库，并使用了其中的 fadeInDown 和 fadeOutUp 类名来定义过渡动画效果。