VueUse动画中如何使用useTransition实现元素淡入淡出效果？

Question

在VueUse动画中使用useTransition实现元素淡入淡出效果时，如何正确设置初始状态和过渡时长？ 问题：在使用useTransition时，元素的初始状态总是突然出现而不是平滑淡入，同时过渡效果显得过于生硬。如何调整代码以确保元素从完全透明开始，并设置合适的过渡时长来实现流畅的淡入淡出动画？具体来说，是否需要配合CSS不透明度属性使用，还是仅通过useTransition的参数即可完成配置？

Answer 1

1. 问题背景与初步分析

在VueUse中，useTransition 是一个非常强大的工具，用于为响应式数据添加过渡效果。然而，当尝试实现淡入淡出动画时，开发者可能会遇到初始状态突然出现或过渡效果生硬的问题。这通常是因为未正确设置初始状态或未合理配置过渡时长。

为了确保元素从完全透明开始，并平滑地淡入或淡出，我们需要结合 useTransition 和 CSS 的不透明度属性（opacity）。以下将逐步分析如何解决这一问题。

常见问题：

• 元素的初始状态为何突然出现？
• 如何通过 useTransition 参数调整过渡时长？
• CSS 的 opacity 属性是否必须配合使用？

2. 初始状态的设置

要实现淡入淡出效果，首先需要确保元素的初始状态是完全透明的。可以通过直接设置 CSS 的 opacity: 0 来实现这一点。

以下是代码示例：

<template>
  <div :style="{ opacity }">Transition Element</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useTransition } from '@vueuse/core'

const rawValue = ref(0) // 初始值设为 0
const { value: opacity } = useTransition(rawValue, {
  duration: 1000, // 过渡时长 1 秒
})

onMounted(() => {
  rawValue.value = 1 // 在组件挂载后触发过渡
})
</script>

在此示例中，我们通过将 rawValue 的初始值设为 0，并将其绑定到 opacity 样式上，确保了元素从完全透明开始。

3. 过渡时长的调整

通过 useTransition 的 duration 参数，可以轻松调整过渡效果的持续时间。较长的持续时间会让动画更加流畅，但也会显得较慢；而较短的时间则会让动画更紧凑，但也可能显得生硬。

建议根据实际场景调整 duration 值，例如：

场景	推荐时长 (毫秒)
简单提示框显示	300 - 500
页面加载动画	800 - 1200
复杂交互动画	1500 - 2000

4. 是否需要配合 CSS 使用

虽然 useTransition 可以独立完成过渡逻辑，但在某些情况下，仅依赖它可能无法达到最佳视觉效果。例如，若希望在动画过程中应用额外的样式变化（如缩放或位移），就需要结合 CSS 动画。

以下是一个结合 CSS 的完整示例：

<template>
  <div class="transition-element" :style="{ opacity }">Transition Element</div>
</template>

<script setup>
import { ref } from 'vue'
import { useTransition } from '@vueuse/core'

const rawValue = ref(0)
const { value: opacity } = useTransition(rawValue, {
  duration: 1000,
})

setTimeout(() => {
  rawValue.value = 1
}, 100)
</script>

<style>
.transition-element {
  transition: transform 1s ease, opacity 1s ease; /* 配合 CSS 动画 */
}
</style>

5. 动画流程图

以下是淡入淡出动画的执行流程图，帮助理解各个阶段的逻辑：

graph TD;
    A[初始化] --设置初始值--> B{元素透明};
    B --触发过渡--> C[渐变到完全可见];
    C --过渡结束--> D[保持最终状态];

此流程图清晰展示了从初始状态到最终状态的完整过程。