react学习笔记（四）

react学习笔记（四）

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 {
            <>
                
                    
i can fade toggle
                
                
            
        }
    }
}

ReactDom.render(,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表示的是动画执行的时间
• classNames : 注意：是classNames不是className calssNames表示的是动画的类
• unMountOnExit : unMountOnExit表示的是在离场动画执行完后在页面上移除包裹的dom节点
• onEnter : 当组件enter或appera的时候调用
• onEntering : 当组件enter-active或appera-active的时候调用
• onEntered : onEntered 动画进场完毕后执行
• onExit : 当组件应用exit类名时调用
• onExiting : 当组件应用exit-active类名时候调用
• onExited : onExited 动画离场完毕后执行

<> 是 React.Fragment 的简写，Fragment的作用是 聚合一个子元素列表，并且不在dom中添加额外的节点