見せる・隠す（Show / Hide）

'use client';
import { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';

export default function ShowHideFramerDemo() {
  const [visible, setVisible] = useState(true);

  return (
    <>
      <button onClick={() => setVisible(v => !v)}>トグル</button>

      {/* フェード */}
      <AnimatePresence>
        {visible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            transition={{ duration: 0.4 }}
          >
            フェードするコンテンツ
          </motion.div>
        )}
      </AnimatePresence>

      {/* スライドダウン */}
      <AnimatePresence>
        {visible && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            transition={{ duration: 0.4, ease: 'easeInOut' }}
            style={{ overflow: 'hidden' }}
          >
            スライドするコンテンツ
          </motion.div>
        )}
      </AnimatePresence>

      {/* mode="wait" で切り替えアニメーション */}
      <AnimatePresence mode="wait">
        {visible ? (
          <motion.div
            key="shown"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.3 }}
          >
            表示中
          </motion.div>
        ) : (
          <motion.div
            key="hidden"
            initial={{ opacity: 0, scale: 0.8 }}
            animate={{ opacity: 1, scale: 1 }}
            exit={{ opacity: 0, scale: 0.8 }}
            transition={{ duration: 0.3 }}
          >
            非表示
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}

// show / hide
$('#box').hide();
$('#box').show();

// toggle
$('#box').toggle();

// fadeIn / fadeOut
$('#box').fadeIn(400);
$('#box').fadeOut(400);

// fadeToggle
$('#box').fadeToggle(400);

// slideDown / slideUp
$('#box').slideDown(400);
$('#box').slideUp(400);

// slideToggle
$('#box').slideToggle(400);