motion

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Motion Vue (motion-v)

Animation library for Vue 3 and Nuxt. Production-ready, hardware-accelerated animations with minimal bundle size.

Current stable: motion-v 1.x - Vue port of Motion (formerly Framer Motion)

适用于Vue 3和Nuxt的动画库。可用于生产环境，提供硬件加速动画，且包体积极小。

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

Overview

概述

Progressive reference for Motion Vue animations. Load only files relevant to current task (~200 tokens base, 500-1500 per sub-file).

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

When to Use

使用场景

Use Motion Vue for:

Simple declarative animations (fade, slide, scale)
Gesture-based interactions (hover, tap, drag)
Scroll-linked animations
Layout animations and shared element transitions
Spring physics animations

Consider alternatives:

GSAP - Complex timelines, SVG morphing, scroll-triggered sequences
@vueuse/motion - Simpler API, less features, smaller bundle
CSS animations - Simple transitions without JS

适合使用Motion Vue的场景：

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

可考虑的替代方案：

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

Installation

安装

bash

undefined

bash

undefined

Vue 3

pnpm add motion-v

Nuxt 3

pnpm add motion-v @vueuse/nuxt


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

pnpm add motion-v @vueuse/nuxt


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

Quick Reference

快速参考

Working on...	Load file
Motion component, gestures	references/components.md
useMotionValue, useScroll	references/composables.md
Animation examples, patterns	references/examples.md

处理任务...	加载文件
运动组件、手势	references/components.md
useMotionValue、useScroll	references/composables.md
动画示例、模式	references/examples.md

Loading Files

文件加载建议

Consider loading these reference files based on your task:

references/components.md - if using Motion component, gestures, or layout animations
references/composables.md - if using useMotionValue, useScroll, useSpring, or animate()
references/examples.md - if looking for animation patterns or inspiration

DO NOT load all files at once. Load only what's relevant to your current task.

请根据当前任务加载对应的参考文件：

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

请勿一次性加载所有文件。 仅加载与当前任务相关的内容。

Core Concepts

核心概念

Motion Component

运动组件

Render any HTML/SVG element with animation capabilities:

vue

<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 }"
  >
    Animated content
  </motion.div>
</template>

为任意HTML/SVG元素添加动画能力：

vue

<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>

Gesture Animations

手势动画

vue

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

vue

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

Scroll Animations

滚动动画

vue

<motion.div
  :initial="{ opacity: 0 }"
  :whileInView="{ opacity: 1 }"
  :viewport="{ once: true, margin: '-100px' }"
>
  Appears on scroll
</motion.div>

vue

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

Available Guidance

可用指南

references/components.md - Motion component variants, animation props, gesture props, layout animations, transition configuration

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

references/examples.md - External resources, component libraries, animation patterns and inspiration

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

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

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