react學(xué)習(xí)筆記（四）

react-transition-group

1. 安裝 npm install react-transition-group
2. 引用 import {CSSTransition} from 'react-transition-group'
3. 使用

class Transition extends React.Component{
    constructor(props) {
        super(props)
        this.state = {
            show: true
        }
        this.toggleHandle = this.toggleHandle.bind(this)
        this.enteredHandle = this.enteredHandle.bind(this)
        this.exitedHandle = this.exitedHandle.bind(this)
    }
    toggleHandle(){
        this.setState({
            show: !this.state.show
        })
    }

    render() {
        return {
            <>
                <CSSTransition in={this.state.show}
                               timeout={1000}
                               unMountOnExit
                               classNames='fade'
                               onEntered={this.enteredHandle}
                               onExited={this.exitedHandle}
                >
                    <div>i can fade toggle</div>
                </CSSTransition>
                <button onClick={this.toggleHandle}></button>
            </>
        }
    }
}

ReactDom.render(<Transition />,docuemnt.getElementById('id'))

/*-----------App.css-----------*/
    .fade-enter-done, .fade-exit{
    transform: translateX(0);
    opacity: 1;
    }
    .fade-enter, .fade-exit-done{
    transform: translateX(200px);
    opacity: 0;
    }
    .fade-enter-active{
    transform: translateX(0);
    opacity: 1;
    transition: opacity 1s ease-in,
                transform 1s ease-in;
    }
    .fade-exit-active{
    transform: translateX(200px);
    opacity: 0;
    transition: opacity 1s ease-in,
                transform 1s ease-in;
    }

• in : in從 false 到 true 表示的是入場，反之表示的是離場
• timeout : timeout表示的是動畫執(zhí)行的時間
• classNames : 注意：是classNames不是className calssNames表示的是動畫的類
• unMountOnExit : unMountOnExit表示的是在離場動畫執(zhí)行完后在頁面上移除包裹的dom節(jié)點
• onEnter : 當(dāng)組件enter或appera的時候調(diào)用
• onEntering : 當(dāng)組件enter-active或appera-active的時候調(diào)用
• onEntered : onEntered 動畫進(jìn)場完畢后執(zhí)行
• onExit : 當(dāng)組件應(yīng)用exit類名時調(diào)用
• onExiting : 當(dāng)組件應(yīng)用exit-active類名時候調(diào)用
• onExited : onExited 動畫離場完畢后執(zhí)行

<></> 是 React.Fragment 的簡寫，F(xiàn)ragment的作用是 聚合一個子元素列表，并且不在dom中添加額外的節(jié)點