Motion 动画

Motion 是 Slidev 内置的声明式动画方案（基于 VueUse Motion），通过 v-motion 指令描述元素在进入、离开、悬停、点击等状态下的动效，无需手写 CSS 关键帧。

VueUse Motion 集成

Slidev 默认集成 Motion，无需额外安装，直接在元素上使用 v-motion：

::v-motion{initial="{opacity: 0, y: 20}" enter="{opacity: 1, y: 0}"}

初始透明且下移，进入时淡入上移

::

<v-motion initial="{opacity: 0, scale: 0.8}" enter="{opacity: 1, scale: 1}">
  缩放进入的元素
</v-motion>

Motion 以状态对象描述动画：initial（初始态）、enter（进入态）、leave（离开态）、hovered（悬停态）、tapped（点击态）。

v-motion 指令

v-motion 接受多个状态：

::v-motion{initial="{opacity: 0}" enter="{opacity: 1}" hovered="{scale: 1.1}"}

悬停时放大的卡片

::

常用动效属性：

属性	含义
opacity	透明度 0-1
x / y	水平/垂直位移（px）
scale	缩放（1 为原大小）
rotate	旋转角度
transition	过渡时长与缓动

::v-motion{initial="{opacity: 0, x: -50}" enter="{opacity: 1, x: 0, transition: {duration: 600}}"}

从左侧滑入

::

进入 / 离开 / 悬停动效

Motion 支持多状态组合，实现完整的进出交互：

::v-motion
  initial="{opacity: 0, y: 20}"
  enter="{opacity: 1, y: 0}"
  leave="{opacity: 0, y: -20}"
  hovered="{scale: 1.05}"
::

悬停放大、离开上移消失的卡片

::

• enter：元素可见时的动效
• leave：元素消失时的动效
• hovered：鼠标悬停时的动效
• tapped：点击按下时的动效

基于点击的 Motion 链式动画

结合 v-click 与 v-motion，实现"每次点击触发下一步动画"的链式编排：

::v-click
  ::v-motion{initial="{opacity: 0, x: -40}" enter="{opacity: 1, x: 0}"}
  第一步：左侧滑入
  ::
::

::v-click
  ::v-motion{initial="{opacity: 0, x: -40}" enter="{opacity: 1, x: 0}"}
  第二步：左侧滑入
  ::
::

每次点击，一个新元素以相同动效入场，形成连贯的"逐条滑入"节奏。

也可以给 Motion 元素追加延迟，形成排队动画：

::v-motion{initial="{opacity: 0, y: 20}" enter="{opacity: 1, y: 0, transition: {delay: 200}}"}

第二批（延迟 200ms）入场

::

常见动效示例

入场动效

::v-motion{initial="{opacity: 0, scale: 0.9}" enter="{opacity: 1, scale: 1}"}

放大淡入

::

::v-motion{initial="{opacity: 0, y: 40}" enter="{opacity: 1, y: 0}"}

上滑淡入

::

::v-motion{initial="{opacity: 0, rotate: -5}" enter="{opacity: 1, rotate: 0}"}

轻微旋转进入

::

卡片交互

::v-motion{initial="{opacity: 0}" enter="{opacity: 1}" hovered="{scale: 1.1, rotate: 2}"}

悬停放大并旋转

::

Motion 与 CSS 动画对比

维度	Motion（v-motion）	CSS 动画
写法	声明式状态对象	手写关键帧/过渡
多状态	进入/离开/悬停/点击	需自己管理状态类
链式	结合 v-click 自然编排	需手动组合
性能	基于 transform/opacity	取决于写法
适用	复杂动效、交互编排	简单点缀、持续循环

使用建议

场景	推荐
逐条讲解	v-click + v-motion 滑入
卡片悬停反馈	hovered 状态
结论强调	scale + opacity 入场
连续动画	transition.delay 排队

Motion 让动画从"写 CSS"变为"描述状态"，与 v-click 天然配合，是制作高级演示动效的核心工具。