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
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
delay | number | undefined | — | 交错进场延迟(ms),同屏多元素用 index 递增制造节奏 |
threshold | number | undefined | — | 触发进场的可见比例,缺省 0.15 |
Slots
| 插槽 | 说明 |
|---|---|
default | — |