blurを使用してぼかし効果で消えたり現れたりするコンポーネントのサンプルを作りました。
使用ライブラリ
使用したライブラリはFramer Motionというアニメーションライブラリです。
参考リンク
あわせて読みたい
Motion – A modern animation library for JavaScript and React
Motion is built on native browser APIs for a tiny filesize and superfast performance. It uses hardware acceleration for smooth and eco-friendly animations. Prev…
Framer MotionはChakra UIをインストールすると依存パッケージとしてインストールされます。Chakra UIを使用している場合は特に追加インストールすることなく使用できます。
実装
サンプルとしてボタン押下で表示・非表示が切り替わるように作成しました。
