文档：Get started with Motion for Vue | Motion for Vue

开始使用 Motion for Vue

Motion for Vue 是一个简单但无限的动画库。它是唯一具有混合引擎的动画库，能够进行硬件加速动画。

在本指南中，我们将学习如何安装 Motion Vue 并快速浏览其主要功能。

安装

Motion 可通过 npm 获得：

npm install motion-v

Nuxt 模块

Motion Vue 提供 Nuxt 模块支持。

在 nuxt.config.ts 中，只需将 motion-v/nuxt 添加到模块中，它就会自动为你导入所有组件。

export default defineNuxtConfig({
  modules: ['motion-v/nuxt'],
})

`unplugin-vue-components`

Vue 的 Motion 还支持 unplugin-vue-components 从 motion-v 自动导入所有组件：

import Components from 'unplugin-vue-components/vite'
import MotionResolver from 'motion-v/resolver'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: true,
      resolvers: [
        MotionResolver()
      ],
    }),
  ],
})

注意：自动导入目前不支持 <motion /> 组件，因此您需要手动导入它。

注意： Motion for Vue 包含专门为 Vue 量身定制的 API，但原版 Motion 的每个功能也都兼容并可用于高级用例。

配置 AI 编辑器

借助 Motion for AI，您可以将 Motion for Vue 文档直接加载到 AI 代码编辑器中，以提高其建议的质量。了解更多。

用法

Motion for Vue 的核心是 <motion /> 组件。它是一个普通的 DOM 元素，具有动画功能。

<template>
  <motion.div />
</template>

为运动组件制作动画就像通过 animate 属性设置值一样简单：

<motion.ul :animate="{ rotate: 360 }" />