流体交互层:按压反馈 + 真半透明材质 + 主题交叉过渡 + 弹层材质化
按 apple-design(Designing Fluid Interfaces)审查落地: - 全站补 :active 按压缩放反馈(按钮/tab/链接/命令面板/前后栏导航),交互元素加 touch-action - TopBar、首页标题栏、浮动主题钮改 color-mix 半透明 + blur 真材质,配 reduced-transparency 回退 - 主题切换 250ms 交叉过渡(theme-anim 瞬时类),消除亮度突变 - CommandPalette/ShortcutsPanel 过 <Transition name="pop">:scrim 淡入 + 面板自顶部锚点 scale 进入,退出原路返回 - 首页标题栏收缩由二值跳变改为滚动进度 --sq 连续插值(16–56px) - reduced-motion 例外:弹层保留短交叉淡入,禁位移与主题过渡 - 触控目标增大(主题钮 40/44px、tab、后台导航项),文章大标题负字距 + 收紧行高
This commit is contained in:
@@ -156,8 +156,12 @@ watch(() => route.path, () => loadCounts())
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<CommandPalette v-if="paletteOpen" @close="paletteOpen = false" />
|
||||
<ShortcutsPanel v-if="shortcutsOpen" @close="shortcutsOpen = false" />
|
||||
<Transition name="pop">
|
||||
<CommandPalette v-if="paletteOpen" @close="paletteOpen = false" />
|
||||
</Transition>
|
||||
<Transition name="pop">
|
||||
<ShortcutsPanel v-if="shortcutsOpen" @close="shortcutsOpen = false" />
|
||||
</Transition>
|
||||
</div>
|
||||
<div v-else class="checking">检查登录状态…</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user