import React, { useRef, useState} from 'react'
import './animate.scss'
import { CSSTransition } from 'react-transition-group'

export default function App() {
    const [prop, setProp] = useState(false)
    // 这只是CSSTransition的一个规范
    const nodeRef = useRef(null)
    const handleClick = () => {
        setProp(!prop)
    }
    const handleAnimateClick = () => {
        alert(666)
    }
    // timeout 控制选择器切换，也就是加类减去类的时间
    // 只有timeout = transition-duration过渡恰好正常执行完成
    // true执行enter逻辑，false执行exit逻辑

    return (
        <div className='Animate'>
            <div>04_animate</div>
            {prop ? 1 : 2}
            <button onClick={handleClick}>点击</button>
            <CSSTransition in={prop} timeout={1000} classNames="fade" nodeRef={nodeRef} 
                unmountOnExit onClick={handleAnimateClick} appear>
                <div className='box' ref={nodeRef} ></div>
            </CSSTransition>
        </div>
    )
}

css

.Animate {
    .box {
        width: 150px;
        height: 150px;
        background: red;
        opacity: 0;
    }

    .fade-enter {
        opacity: 0;
    }

    .fade-enter-active {
        opacity: 1;
        transition: 1s;
    }

    .fade-enter-done {
        opacity: 1;
    }

    .fade-exit {
        opacity: 1;
    }

    .fade-exit-active {
        opacity: 0;
        transition: 1s;
    }

    .fade-exit-done {
        opacity: 0;
    }

    .fade-apper {
        opacity: 0;
    }

    .fade-appear-active {
        opacity: 1;
        transition: 1s;
    }

    .fade-appear-done {
        opacity: 1;
        }
}