要素の切り替え（Transition）

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

const ITEMS = ['春 🌸', '夏 🌿', '秋 🍂', '冬 ❄️'];

export default function TransitionDemo() {
  const [current, setCurrent] = useState(0);

  return (
    <>
      {/* フェード切り替え */}
      <AnimatePresence mode="wait">
        <motion.div
          key={current}
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          exit={{ opacity: 0 }}
          transition={{ duration: 0.3 }}
        >
          {ITEMS[current]}
        </motion.div>
      </AnimatePresence>

      {/* スライド切り替え（右から） */}
      <AnimatePresence mode="wait">
        <motion.div
          key={current}
          initial={{ opacity: 0, x: 60 }}
          animate={{ opacity: 1, x: 0 }}
          exit={{ opacity: 0, x: -60 }}
          transition={{ duration: 0.3, ease: 'easeInOut' }}
        >
          {ITEMS[current]}
        </motion.div>
      </AnimatePresence>

      {/* スケール切り替え */}
      <AnimatePresence mode="wait">
        <motion.div
          key={current}
          initial={{ opacity: 0, scale: 0.85 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.85 }}
          transition={{ duration: 0.3 }}
        >
          {ITEMS[current]}
        </motion.div>
      </AnimatePresence>

      <div>
        {ITEMS.map((_, i) => (
          <button key={i} onClick={() => setCurrent(i)}>{i}</button>
        ))}
      </div>
    </>
  );
}

// フェードで切り替え
$('#content-old').fadeOut(300, function () {
  $('#content-new').fadeIn(300);
});

// スライドで切り替え
$('#content-old').slideUp(300, function () {
  $('#content-new').slideDown(300);
});

// hide/show で即時切り替え（アニメーションなし）
$('#content-old').hide();
$('#content-new').show();

// animate() でカスタム切り替え
$('#content-old').animate({ opacity: 0 }, 300, function () {
  $(this).hide();
  $('#content-new').css({ opacity: 0 }).show().animate({ opacity: 1 }, 300);
});