元素过渡动画

v-click 解决"何时出现"，过渡动画解决"如何出现"：淡入、滑动、放大、旋转——让元素出现的方式有质感。

v-click 配合过渡效果

在 MDC 块或 HTML 元素上组合 v-click 与过渡类，即可让元素以动画方式出现：

::v-click{class="transition-all duration-500"}

淡入出现的文字

::

<v-click class="transition-all duration-500 opacity-0">
  初始透明，点击后淡入
</v-click>

原理：v-click 切换元素时，UnoCSS 的过渡类提供过渡动画，元素从隐藏态平滑变化到显示态。

显示后隐藏 Enter/Leave

需要"进入"和"离开"两种动画时，用 transition 相关指令配合：

::v-click{at=1}

第一次点击出现

::

::v-click.hide{at=1}

第一次点击消失（与本批同时反向）

::

更精细的做法是直接写 CSS 过渡：初始透明、点击变可见，反向时再变回透明：

<style scoped>
.demo {
  transition: opacity 0.5s ease;
}
</style>

::v-click{class="demo"}

淡入淡出的内容

::

CSS 过渡与动画结合

过渡（transition）

过渡针对属性变化，适合显示/隐藏的平滑化：

<style scoped>
.fade {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
</style>

::v-click{class="fade"}

淡入 + 位移

::

关键帧动画（animation）

动画针对连续关键帧，适合持续的强调效果：

<style scoped>
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.bounce {
  animation: bounce 1s infinite;
}
</style>

::v-click{class="bounce"}

点击后持续弹跳

::

自定义动画类

把常用的动画封装成类，多处复用：

<style global>
.fade-in {
  transition: opacity 0.5s ease;
}
.slide-up {
  transition: transform 0.5s ease, opacity 0.5s ease;
}
@keyframes pop {
  0% { transform: scale(0.8); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.pop {
  animation: pop 0.4s ease-out;
}
</style>

使用：

::v-click{class="pop"}

弹出出现的标题

::

::v-click{class="slide-up"}

上滑出现的说明

::

常用动画类型速查

类型	实现	效果
淡入淡出	transition: opacity	透明度变化
位移动画	transition: transform	上滑/左滑/缩放
弹性弹出	@keyframes pop	从小放大弹出
持续强调	animation: ... infinite	弹跳、闪烁、脉冲
组合动画	多个属性同过渡	淡入 + 位移 + 缩放

与 Motion 动画的取舍

方式	特点	适用
CSS 过渡/动画	简单、无需依赖、性能好	显示/隐藏、强调、悬停
Motion（v-motion）	声明式、支持进入/离开/悬停多状态	复杂动效、链式动画

CSS 动画适合快速点缀；复杂的状态切换（进入、离开、悬停、基于点击的链式效果）使用 v-motion 更清晰，见下一章「Motion 动画」。

完整示例：结论强调

<style scoped>
.highlight {
  transition: all 0.5s ease;
  transform: scale(0.9);
}
</style>

# 性能结论

::v-click{class="highlight"}

**QPS 提升 3 倍**，延迟降低 60%。

::

点击后结论从 90% 缩放平滑到原始大小，视觉上"弹出"重点结论，比直接出现更有冲击力。