name: motion description: 当使用 Motion Vue (motion-v) 添加动画时使用 - 提供运动组件 API、手势动画、滚动链接效果、布局过渡和 Vue 3/Nuxt 的组合式函数 license: MIT

Motion Vue (motion-v)

适用于 Vue 3 和 Nuxt 的动画库。生产就绪、硬件加速的动画，具有最小的包大小。

当前稳定版本： motion-v 1.x - Motion（原 Framer Motion）的 Vue 端口

概述

Motion Vue 动画的渐进式参考。仅加载与当前任务相关的文件（基础约200个标记，每个子文件500-1500个标记）。

何时使用

使用 Motion Vue 用于：

简单的声明式动画（淡入淡出、滑动、缩放）
基于手势的交互（悬停、点击、拖拽）
滚动链接动画
布局动画和共享元素过渡
弹簧物理动画

考虑替代方案：

GSAP - 复杂的时间线、SVG 变形、滚动触发序列
@vueuse/motion - 更简单的 API，功能较少，包更小
CSS 动画 - 无需 JS 的简单过渡

安装

# Vue 3
pnpm add motion-v

# Nuxt 3
pnpm add motion-v @vueuse/nuxt

// nuxt.config.ts - Nuxt 3 设置
export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})

快速参考

正在处理…	加载文件
Motion 组件、手势	references/components.md
useMotionValue、useScroll	references/composables.md
动画示例、模式	references/examples.md

加载文件

根据您的任务考虑加载这些参考文件：

[ ] references/components.md - 如果使用 Motion 组件、手势或布局动画
[ ] references/composables.md - 如果使用 useMotionValue、useScroll、useSpring 或 animate()
[ ] references/examples.md - 如果寻找动画模式或灵感

不要一次性加载所有文件。 只加载与当前任务相关的文件。

核心概念

Motion 组件

渲染任何具有动画能力的 HTML/SVG 元素：

<script setup lang="ts">
import { motion } from 'motion-v'
</script>

<template>
  <motion.div
    :initial="{ opacity: 0, y: 20 }"
    :animate="{ opacity: 1, y: 0 }"
    :exit="{ opacity: 0, y: -20 }"
    :transition="{ duration: 0.3 }"
  >
    动画内容
  </motion.div>
</template>

手势动画

<motion.button
  :whileHover="{ scale: 1.05 }"
  :whilePress="{ scale: 0.95 }"
  :transition="{ type: 'spring', stiffness: 400 }"
>
  点击我
</motion.button>

滚动动画

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  滚动时出现
</motion.div>

可用指南

references/components.md - Motion 组件变体、动画属性、手势属性、布局动画、过渡配置

references/composables.md - useMotionValue、useSpring、useTransform、useScroll、useInView、animate()

references/examples.md - 外部资源、组件库、动画模式和灵感