React引入react-transition-group实现过渡效果

​​文档地址​​

安装

npm install react-transition-group

该组件提供了4个组件​​Transition、CSSTransition、SwitchTransition、TransitionGroup​​​ 写法跟​​Vue ---- transition​​组件很像

这里主要介绍​​CSSTransition​​

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group'
import "./style.less"

const Transition = () => {
    const [show, setShow] = useState(true)
    return (
        <div className="Transition">
            <button onClick={() => setShow(!show)}>
                当前状态：{show ? '显示' : '隐藏'}</button>
            <CSSTransition
                in={show}
                classNames="fade"
                timeout={1000}
                unmountOnExit={true}
                appear
                onEnter={el => console.log('开始进入', el)}
                onEntering={el => console.log('正在进入')}
                onEntered={el => console.log('进入完成')}
                onExit={el => console.log('开始退出')}
                onExiting={el => console.log('正在退出')}
                onExited={el => console.log('退出完成')}
            >
                <div>hello</div>
            </CSSTransition>
        </div>
    );
}

export default Transition;

.Transition {
    .fade-enter {
        opacity: 0;
    }

    .fade-exit {
        opacity: 1;
    }

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

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