@xwink/ui

    Reveal

    进场渐显。元素进入视口后过渡到位,同屏多个用 delay 递增制造节奏。

    需要宿主 @import '@xwink/ui/motion.css',这几个页面布局级动效的样式都在那个入口里,管理端那种信息密度高的站点用不上,不塞进 tailwind.css 替它们做决定。

    初始隐藏态由 JS 挂载后才加,不写死在模板里——渐进增强,脚本没跑起来时内容始终可见,而不是留一屏空白。prefers-reduced-motion 下直接跳过,不做任何变换。

    vue
    <XReveal>
      <h2>标题</h2>
    </XReveal>
    <XReveal :delay="120">
      <p>正文晚 120ms 进场</p>
    </XReveal>
    

    API

    Props

    名称类型默认值说明
    delaynumber | undefined—交错进场延迟(ms),同屏多元素用 index 递增制造节奏
    thresholdnumber | undefined—触发进场的可见比例,缺省 0.15

    Slots

    插槽说明
    default—