@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