🐈

framer-motionでアコーディオンを作る

2022/09/27に公開

概要

framer-motionを使ってアコーディオンを作る
framer-motion accordionの内容が自分の環境下では動かなかった
また、内容が複雑でチュートリアルには難易度高いので、まず簡単なものが作りたかった

設計

ドキュメントでframer-motionを理解

参考

AnimatedComponent

AnimatedComponentで囲むと、普通は、非表示 -> 表示 (マウント) のタイミングしか制御できないのを、表示 -> 非表示(アンマウント)のタイミングでも制御できるようになる
特にアコーディオンなどで効果を発揮。開くときも閉じるときも同様にアニメーションできる

使ってみるも、エラーに阻まれる

(0 , react__WEBPACK_IMPORTED_MODULE_0__.useId) is not a function

AnimatedComponentが一筋縄では使えなくて困った。

これが近い

package.jsonのframer-motionのバージョンを変えてみる

"framer-motion": 7.3.6 -> 6.2.10

こちらの方がframer-motionのバージョンを含め使っている環境が近かったので参考にして解決

まとめ

AnimatedComponentでエラーが出た際はframer-motionのバージョンを気にする
motion.divなどのframer独自のエレメントの位置関係が不適切だとエラーが出るので、動いている人のコードを参考にすると良い

Discussion