Framer AnimatePresence

DEMO

CODE

<div class="demo-stage fap-stage"><button class="fap-btn" type="button">TOGGLE</button><div class="fap-box"><span>HELLO 👋</span></div></div>

.fap-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; padding:3rem; background:#0F0F12; min-height:280px; }
.fap-btn { background:transparent; border:1px solid #E91B89; color:#E91B89; font-family:'Oswald',sans-serif; letter-spacing:.2em; font-size:.75rem; padding:.55rem 1.3rem; cursor:pointer; border-radius:4px; transition:all .2s; }
.fap-btn:hover { background:#E91B89; color:#fff; }
.fap-box { width:200px; height:120px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:linear-gradient(135deg,#7b37a8,#e91b89); color:#fff; font-family:'Oswald',sans-serif; font-size:1.3rem; opacity:0; transform:scale(.85) translateY(10px); pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1); }
.fap-box.open { opacity:1; transform:scale(1) translateY(0); pointer-events:auto; }

(function(){
  var btn = document.querySelector('.fap-btn');
  var box = document.querySelector('.fap-box');
  if(!btn || !box) return;
  box.classList.add('open'); // 初期は表示
  btn.addEventListener('click', function(){ box.classList.toggle('open'); });
})();

ライブデモはFramer Motion不要のCSS等価版（openクラスのトグルで表示/非表示の両方に遷移）。下がReact + Framer Motionの実装で、exitプロップが「消える瞬間」のアニメを担います。

import { AnimatePresence, motion } from "framer-motion"
import { useState } from "react"

export default function Toggle() {
  const [open, setOpen] = useState(true)
  return (
    <>
      <button onClick={() => setOpen(o => !o)}>TOGGLE</button>
      <AnimatePresence>
        {open && (
          <motion.div
            initial={{ opacity: 0, scale: 0.85, y: 10 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.85, y: 10 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
          >
            HELLO 👋
          </motion.div>
        )}
      </AnimatePresence>
    </>
  )
}

AI PROMPT

表示・非表示の両方にアニメーションが付くトグルをFramer Motionで作って。<AnimatePresence> で条件付きレンダリング {open && <motion.div .../>} を包むと、要素がDOMから消える瞬間にも exit のアニメが走る。motion.div に initial={{opacity:0,scale:.85,y:10}}・animate={{opacity:1,scale:1,y:0}}・exit={{opacity:0,scale:.85,y:10}}・transition={{type:'spring',stiffness:300,damping:20}}。素のCSSで近似するなら openクラスのトグルで opacity/transform を両方向に transition させる。モーダル・トースト・ポップオーバーに。

BOOKS · PR · AMAZON

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。