Vue.js 过渡 & 动画

Vue.js 提供了丰富的过渡和动画效果，使得我们可以为应用添加更加生动和吸引人的交互体验。在 Vue.js 中，通过 transition 组件和 CSS 过渡类实现简单的过渡效果，通过 transition-group 组件实现列表过渡效果，通过 <transition> 和 <transition-group> 组件的 JS 钩子函数实现复杂的动画效果。

过渡

在 Vue.js 中，通过 transition 组件可以为元素添加过渡效果。transition 组件可以包裹任意元素，并通过 name 属性指定过渡效果的类名。

<transition name="fade">
  <p v-if="show">Hello, Vue.js!</p>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}

在上面的示例中，当 show 的值为 true 时，<p> 元素会以淡入的方式显示；当 show 的值为 false 时，<p> 元素会以淡出的方式消失。

列表过渡

除了单个元素的过渡效果，Vue.js 还提供了 transition-group 组件用于实现列表过渡效果。在使用 transition-group 组件时，需要为每个列表项添加唯一的 key 属性。

<transition-group name="list" tag="ul">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</transition-group>

.list-enter-active, .list-leave-active {
  transition: all 0.5s;
}
.list-enter, .list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

在上面的示例中，当 items 数组中的项发生变化时，列表中的元素会以渐隐渐现和位移的方式进行过渡。

JS 钩子函数

除了使用 CSS 类实现过渡和动画效果外，Vue.js 还提供了一系列的 JS 钩子函数，可以在过渡或动画的不同阶段执行自定义逻辑。

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
>
  <p v-if="show">Hello, Vue.js!</p>
</transition>

-- -------------------- ---- -------
-------- -
  --------------- -
    -- ----------
  --
  --------- ----- -
    -- ----------
  --
  -------------- -
    -- ----------
  --
  ------------------ -
    -- -----------
  -
-

通过使用 JS 钩子函数，我们可以更加灵活地控制过渡和动画的效果，实现更加复杂的交互体验。

以上就是关于 Vue.js 过渡 & 动画的内容，希望能帮助你更好地理解和使用 Vue.js 中的过渡和动画功能。