Vue 文档自定义过渡函数应用实例剖析

在 Vue 开发中，过渡效果能极大提升用户体验。虽然 Vue 提供了一些内置过渡，但自定义过渡函数能满足更复杂、个性化的需求。下面通过实例深入剖析其应用。

假设有一个场景：在一个待办事项列表应用里，当添加新事项时，新事项需要以独特的动画效果进入列表；删除事项时，被删除事项要有渐隐并缩小的动画。这就需要用到自定义过渡函数。

创建一个 Vue 组件用于展示待办事项列表。在组件的模板部分，使用 <transition> 标签包裹列表项，这是实现过渡效果的基础。例如：

<template>
  <div>
    <transition :css="false" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <li v-for="(item, index) in todoList" :key="index">{{ item }}</li>
    </transition>
  </div>
</template>

这里 :css="false" 表示不使用 CSS 过渡，完全通过 JavaScript 自定义过渡函数来控制。

接着，在组件的 script 部分定义这些过渡函数。beforeEnter 函数在过渡开始前被调用，可用于设置元素的初始状态。比如：

beforeEnter(el) {
  el.style.opacity = 0
  el.style.transform = 'scale(0.8)'
}

此函数将新添加的列表项初始状态设为透明度为 0 且缩小到 0.8 倍。

enter 函数是过渡的核心，定义过渡过程。在这个例子中：

enter(el, done) {
  gsap.to(el, {
    opacity: 1,
    transform: 'scale(1)',
    duration: 0.5,
    onComplete: done
  })
}

这里使用了 GSAP（GreenSock Animation Platform）库来实现动画效果，将元素的透明度从 0 变为 1，缩放从 0.8 变为 1，过渡时间为 0.5 秒。onComplete 回调函数在动画结束时调用 done，告知 Vue 过渡已完成。

afterEnter 函数在过渡结束后调用，可用于执行一些清理或后续操作。

删除事项的过渡类似，只是动画方向相反。通过这样的自定义过渡函数应用，能为待办事项列表带来生动且符合需求的过渡效果。

掌握 Vue 文档自定义过渡函数，能为应用增添独特魅力，满足多样化的设计需求，提升用户交互体验。