<transition>组件

Jonas24
46 阅读3分钟

Vue.js 的 <transition> 组件是一个特殊的系统组件，用于在元素或组件的插入、更新或移除时自动应用过渡效果。这包括插入和删除，以及依赖于 v-if/v-show 的条件渲染。

以下是 <transition> 组件的基本用法：

<transition>
  <p v-if="show">Hello</p>
</transition>

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

在这个例子中，当 show 的值改变时，<p> 元素的插入和移除都会有过渡效果。

你可以通过在 <transition> 组件上设置 name 属性来自定义过渡类名。例如，如果你设置 name="fade"，那么过渡类名将是 fade-enter-active、fade-leave-active 等。

<transition name="fade">
  <p v-if="show">Hello</p>
</transition>

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

在这个例子中，当 <p> 元素插入和移除时，它会逐渐淡入和淡出。

<transition> 组件还提供了一些属性来控制过渡的行为，例如 mode、duration、appear 等。你可以查看 Vue.js 的官方文档来了解更多关于这些属性的信息。

此外，<transition> 组件还支持 JavaScript 钩子函数，让你可以在过渡的不同阶段执行自定义的 JavaScript 代码。这些钩子函数包括 beforeEnter、enter、afterEnter、beforeLeave、leave、afterLeave 等。

请注意，<transition> 组件并不会改变被包裹元素或组件的行为，也不会改变它们的渲染结果。它只是在元素或组件的插入和移除时自动应用过渡效果。

下面是一些主要的属性和方法：

  1. name：用于自定义过渡类名。例如，如果你设置 name="fade"，那么过渡类名将是 fade-enter-active、fade-leave-active 等。
  2. appear：默认情况下，在初始渲染时不会进行过渡。如果你需要在初始渲染时也进行过渡，可以设置 appear 属性。
  3. mode：控制同时进行的进入/离开过渡的模式。默认模式是 in-out，意味着新元素先进行过渡，完成之后当前元素过渡离开。如果你设置 mode="out-in"，那么当前元素先过渡离开，离开后新元素再进行过渡。
  4. type：指定过渡事件类型，可以设置为 transition 或 animation，默认 Vue.js 会自动检测。
  5. duration：指定过渡的持续时间。可以指定一个数字（以毫秒为单位），也可以指定一个对象，如 { enter: 300, leave: 800 }，分别指定进入和离开的持续时间。

这些是 <transition> 组件的属性，此外，Vue.js 还提供了一系列 JavaScript 钩子函数，让你可以在过渡的不同阶段执行自定义的 JavaScript 代码。这些钩子函数包括：

  • beforeEnter(el) ：进入过渡开始时被调用。
  • enter(el, done) ：进入过渡的核心阶段（即激活状态）。done 是一个函数，必须在进入过渡结束时调用。
  • afterEnter(el) ：进入过渡完成后被调用。
  • enterCancelled(el) ：进入过渡被取消时调用（例如在过渡开始之前被移除）。
  • beforeLeave(el) ：离开过渡开始时被调用。
  • leave(el, done) ：离开过渡的核心阶段。done 是一个函数，必须在离开过渡结束时调用。
  • afterLeave(el) ：离开过渡完成后被调用。
  • leaveCancelled(el) ：离开过渡被取消时调用（例如在过渡开始之前被重新插入）。

这些钩子函数可以让你更细粒度地控制过渡的行为，例如在过渡开始或结束时执行特定的动画或逻辑。

avatar
文章
阅读
粉丝