进出动画

// npm install motion
"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "motion/react";

export default function Page() {
    const [items, setItems] = useState([0, 1, 2]);
    const add = () => setItems((p) => [...p, (p.at(-1) ?? -1) + 1]);
    const remove = () => setItems((p) => p.slice(0, -1));
    return (
        <div className="flex min-h-screen flex-col items-center justify-center gap-6">
            <div className="flex gap-2 text-sm">
                <button onClick={add}>+ Add</button>
                <button onClick={remove}>− Remove</button>
            </div>
            <div className="flex gap-3">
                <AnimatePresence mode="popLayout">
                    {items.map((id) => (
                        <motion.div
                            key={id}
                            layout
                            initial={{ opacity: 0, scale: 0.4, y: 12 }}
                            animate={{ opacity: 1, scale: 1, y: 0 }}
                            exit={{ opacity: 0, scale: 0.4, y: -12 }}
                            className="size-12 bg-pink-400"
                        />
                    ))}
                </AnimatePresence>
            </div>
        </div>
    );
}