React中实现动画的两种方式及对比详解

// Box.jsx
import styles from './box.module.styl';
import { useState } from 'react';

const Box = () => {
    const [open, setOpen] = useState(false);
    return (
        <div>
            <button onClick={() => setOpen(!open)}>
                {open ? 'Close' : 'Open'}
            </button>
            <div className={`${styles.box} ${open ? styles.open : ''}`}></div>
        </div>
    );
};

export default Box;

.box
    width: 100px
    height: 0
    background-color: lightblue
    transition: height 0.3s ease
    overflow: hidden

.box.open
    height: 100px

pnpm install framer-motion

// MotionBox.jsx
import { motion } from 'framer-motion'
import { useState } from 'react'

const MotionBox = () => {
    const [isOpen, setIsOpen] = useState(false)

    return (
        <div>
            <button onClick={() => setIsOpen(!isOpen)}>
                {isOpen ? '隐藏内容' : '显示内容'}
            </button>
            <motion.div
                initial={{ opacity: 0, y: -50 }}
                animate={{ opacity: isOpen ? 1 : 0, y: isOpen ? 0 : -50 }}
                transition={{ duration: 0.5 }}
                style={{
                    backgroundColor: 'skyblue',
                    padding: 20,
                    marginTop: 10,
                    pointerEvents: 'none' // 防止动画区域被误点
                }}
            >
                <h2>Motion Box</h2>
                <p>这是一个使用 Framer Motion 的动画组件</p>
            </motion.div>
        </div>
    )
}

export default MotionBox