今天早上 9 点，我很荣幸地关闭了我们最老的未解决工单，这个问题从 Framer Motion 时代开始就一直困扰着问题看板，最早可以追溯到 2020 年 2 月。

标题是 “[FEATURE] Vue support?”

是的，今天我非常激动地宣布Motion for Vue。一个易于上手，精通有趣的动画库，其独特的混合引擎结合了硬件加速浏览器 API 的性能与 JavaScript 的无限潜力。

它与 Motion for React 相比如何？

感谢我们常驻 Motion 和 Vue 专家令人难以置信的努力Rick Hup，Motion for Vue 是 Motion for React 的一个 功能完整 的移植版本。这意味着弹簧动画、运动值、滚动动画，以及最令人兴奋的布局动画，在第一天就都已具备。

其声明式 <motion /> API 对于 Motion 爱好者来说会立即感到熟悉，只不过现在带有了 Vue 特色。

<template>
  <motion.div
    :initial="{ opacity: 0, scale: 0 }"
    :animate="{ opacity: 1, scale: 1 }"
  />
</template>

所有你喜欢的 motion 属性都在这里，例如手势动画属性 whileHover、whilePress 和 whileInView。

<template>
  <motion.div :whileHover="{ scale: 1.1 }" :whilePress="{ scale: 0.9 }" />
</template>

我猜想人们一直要求在 Vue 中使用 Motion 的最大原因是其强大的布局动画引擎，它驱动了成千上万个 React 和 Framer 网站上复杂的布局动画。是的，它也在这里了！

<motion.div
  v-if="item.label === selectedTab.label"
  layout-id="underline"
/>

Motion+ for Vue

不仅如此。自从Framer Motion 独立出来，我一直在构建Motion+，以为 Motion 的开发提供资金。这是一次性付费、终身会员资格，可解锁高级示例的源代码，授予访问独家组件的权限，邀请加入我们的私人 Discord，提前体验新 API，以及更多。

所有这些 Motion+ 示例都已移植到 Vue，例如这个 App Store 演示

其中包括整套Radix 集成演示。

我们独有的 Motion+ 组件 Cursor 和 AnimateNumber 也已发布

开始使用

我非常兴奋地邀请 Vue 开发者加入 Motion 社区！人们已经在使用原生 JS API 通过 Vue 和 Motion 创建令人难以置信的界面，所以我迫不及待想看看人们用它做出什么。

Motion for Vue 现已通过 npm 上的 motion-v 包提供，你可以通过我们的快速入门指南。或者通过我们的Motion for Vue 示例.