v-fade 淡入显隐

元素进入视口时，从「透明度 0 + 向下偏移 distance」平滑过渡到「完全显示」，只播放一次。

基础用法

淡入元素 1（默认参数）

淡入元素 2（自定义时长与位移）

查看代码

<template>
    <div>
        <div
            v-fade
            style="padding: 24px; margin-bottom: 12px; background: #646cff; color: #fff; border-radius: 8px"
        >
            淡入元素 1（默认参数）
        </div>
        <div
            v-fade="{ duration: 800, distance: 60 }"
            style="padding: 24px; margin-bottom: 12px; background: #42b883; color: #fff; border-radius: 8px"
        >
            淡入元素 2（自定义时长与位移）
        </div>
    </div>
</template>

<script setup lang="ts">
import { fadeDirective } from "@a-drowned-fish/rox-v";

const vFade = fadeDirective.directive;
</script>

使用方式

指令值支持「数字」或「对象」两种形式：

<!-- 仅设置延迟（ms） -->
<div v-fade="300">...</div>

<!-- 完整配置 -->
<div v-fade="{ duration: 800, delay: 200, distance: 60 }">...</div>

<!-- 不传值：使用默认参数 -->
<div v-fade>...</div>