motion-v-skilld

motion-v（Motion for Vue）2.4.4

Motion for Vue は、Motion（旧称 Framer Motion）の Vue 版です。 props、モーション値、ハイブリッドエンジンを通じて、DOM と SVG をアニメーション化します。

事前に用意されたソースから確認済みの情報：

• パッケージ：motion-v 2.4.4、MIT、ESM のみ（package.json:4、package.json:20-33）。
• ピア依存関係：vue >= 3.0.0、@vueuse/core >= 10.0.0（package.json:53-56）。
• エンジン依存関係：framer-motion、motion-dom、motion-utils、すべて ^13.3.0（package.json:57-62）。
• エントリーポイント：motion-v、motion-v/nuxt、motion-v/resolver（package.json:20-33）。
• ルートエントリーは framer-motion/dom のすべてを再エクスポートします（dist/es/index.d.ts:1）。そのため、animate、stagger、arc、イージング関数などは Motion エンジンから提供されます。
• リポジトリとドキュメント：https://github.com/motiondivision/motion-vue、https://motion.dev/docs/vue

クイックスタート

npm install motion-v

<script setup>
import { motion } from 'motion-v'
</script>

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

motion は、すべての HTML タグと SVG タグに対応する、型付けされたコンポーネントの名前空間です （dist/es/components/motion/index.d.ts:3-182）。motion.div、motion.svg、motion.path などがあります。

コアモデル

• initial、animate、exit、whileHover、whilePress、whileInView、whileFocus、whileDrag には、値またはバリアントラベルを設定します。
• animate の値が変わると、要素はその値へアニメーションします。
• transition はタイミング、スプリング、遅延、スタッガーを設定します。
• variants と custom を組み合わせることで、要素ごとに動的なターゲットを指定できます。
• アニメーション可能な値には、独立した変形（x、y、scale、rotate、skewX）、色、CSS 変数が含まれます（dist/es/types/state.d.ts:45-47）。
• テンプレートでは、motion props を : プレフィックスでバインドします。これらは属性ではなく props です。

すべての props とフックの一覧：references/api-surface.md

重要なルール

これらのルールは、よくあるバグを防ぎます。それぞれのルールには出典を記載しています。

1. バンドルサイズが重要な場合は、motion の代わりに m と LazyMotion を使用します。 motion はすべての機能を含み、約 34 kb です。m は約 6 kb から始まります。 バリアント、ジェスチャー、終了アニメーションには domAnimation を読み込みます。ドラッグとレイアウトには domMax を読み込みます。 開発中に意図しない motion の使用を検出できるよう、strict を設定します。 https://motion.dev/docs/vue-lazymotion, dist/es/components/lazy-motion/index.d.ts:4-13

2. AnimatePresence 自体に v-if を設定しないでください。アンマウントされると、子要素の終了アニメーションを制御できません。 条件は直接の子要素に設定します。

   <AnimatePresence>
     <motion.div v-if="isVisible" :exit="{ opacity: 0 }" />
   </AnimatePresence>
   

   https://motion.dev/docs/vue-animate-presence

3. レイアウトアニメーションでは、変化する CSS は :animate ではなく、:style に適用します。 layout プロパティが計測された変化をアニメーション化します。:animate の値は FLIP 計測と競合します。 https://motion.dev/docs/vue-layout-animations

4. layout 要素の borderRadius と boxShadow はインラインスタイルとして設定します。 Motion がこの 2 つのスケールの歪みを補正するのは、:style 内でモーション値として指定した場合のみです。 https://motion.dev/docs/vue-layout-animations#scale-correction

5. スクロール可能な祖先要素には layoutScroll を、固定位置の祖先要素には layoutRoot を追加します。 これらがないと、スクロール位置またはビューポートのオフセットが 0 以外の場合に、レイアウトの計測が正しく行われません。 dist/es/components/motion/props.d.ts:71-78

6. ルートの MotionConfig に reducedMotion="user" を設定します。 デフォルトは "never" なので、有効にしない限りアニメーションは OS のアクセシビリティ設定を無視します。 dist/es/components/motion-config/types.d.ts:5-20

7. スタガーには、リアクティブな状態で計算した遅延ではなく、custom を使った動的バリアントを使用します。 :custom="index" を渡し、バリアント関数内で delay を解決します。 https://motion.dev/docs/vue-animation

8. デモや数値表示では、<RowValue :value="mv" /> を使ってライブのモーション値を描画します。 これは innerHTML に直接書き込み、高速な値が Vue のレンダリング経路を通らないようにします。 dist/es/components/RowValue.d.ts:1-15

9. ラッパーコンポーネントが適さない場合は、通常の要素に v-motion を使用します。 app.use(MotionPlugin) でグローバルに登録するか、createPresetDirective でプリセットを作成します。 このディレクティブは getSSRProps による SSR をサポートし、デフォルトで domMax の機能を使用します。 dist/es/directive/index.mjs:153-172

10. ジェスチャーの省略形プロパティ focus、hover、press、inView は v2.0.0 で削除されました。 アニメーションには whileFocus、whileHover、whilePress、whileInView を使用し、ロジックには onHoverStart などのイベントプロパティを使用します。 リファレンス／移行ガイドを参照してください。

よくあるタスク

入場と終了、スタガー、ドラッグ、スクロール連動、命令型の useAnimate、共有レイアウト、Reorder リスト、ディレクティブの使用、LazyMotion、Nuxt のセットアップを、それぞれ実行可能なスニペット付きで紹介しています：リファレンス／レシピ

2.2.1 のベースラインからの変更点

• 2.3.0：弧に沿ったモーションを実現する arc()。transition: { path: arc(...) } として使用できます。useAnimate が MotionConfig skipAnimations を尊重するようになりました。
• 2.4.0：多次元の Reorder、Reorder.Group の axis="xy"。
• 2.4.2：KeepAlive にキャッシュされたコンポーネントで、終了アニメーションと入場アニメーションが復元されました。
• 2.4.4：Nuxt モジュールがビルド時に motion-v をトランスパイルしなくなりました。

詳細とリンク：リファレンス／移行ガイド

バージョン固有の注意事項

• SVG の位置には x、y、scale の代わりに attrX、attrY、attrScale を使用します（dist/es/types/state.d.ts:15-20）。
• useSpring は値または MotionValue ソースを受け取り、対応する型を返します（dist/es/value/use-spring.d.ts:6-7）。
• useTransform は範囲をマッピングし、1 回の呼び出しで出力の名前付きマップも返します（dist/es/value/use-transform.d.ts:54-97）。
• AnimatePresence は sync、wait、popLayout の mode に加えて、popLayout の終了方向を指定する anchorX をサポートします（dist/es/components/animate-presence/types.d.ts:1-8）。
• ディレクティブとコンポーネントは同じリゾルバーを共有するため、v-motion はバリアント、プレゼンス、設定のコンテキストを引き継ぎます（dist/es/utils/resolve-motion-props.d.ts:11-15）。