浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

framer-motionで透過を実装

framer-motionでページをふわっと表示させたい場合は以下のようにします。

<motion.div 
  animate={{opacity: 1}}
  initial={{opacity: 0}}
  exit={{opacity: 1}}
  transition={{duration: 1.0}}>

現れる時(initial)は完全な透過状態にしておいて、終わりにopacityを0にして

完全に見えるように仕向けます。

animateはinitial~exitが終わった後の一連の状態を表します。

transtionで描画されるまでの間隔を指定します。

framer-motionを使うと透過の動きもここまで簡単にできます。

  • この記事いいね! (0)