React动画react-transition-group安装使用

可以登录https://github.com，在github上搜索react-transition-group

搜索出结果，点击星多的项目
这里有个主文档，点击进入

安装语句有两种,在自己项目的目录里安装

npm

npm install react-transition-group --save

yarn

yarn add react-transition-group

Components里有各种案例和说明，喜欢看文档的小伙伴可以看看

普通React加动画效果

js代码

import React,{ Component,Fragment } from 'react';
import './test.css';//引入样式

class Test3 extends Component{
    constructor(props){
        super(props);
        this.state={
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this)
    }

    render(){
        return(
            <Fragment>
                <div className={this.state.show?'show':'hide'}>hello</div>
                   
                <button onClick={this.handleToggle}>toggle</button>             
            </Fragment>
        ) 
    }
    handleToggle(){
        this.setState({
            show:this.state.show?false :true
        })
    }
}
export default Test3;

test.css代码

.show{animation: show-item 1s ease-in forwards}
.hide{animation: hide-item 1s ease-in forwards}
@keyframes hide-item{
    0%{
        opacity: 1;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100%{
        opacity: 0;
        color: blue;
    }
}
@keyframes show-item{
    0%{
        opacity: 0;
        color: red;
    }
    50%{
        opacity: 0.5;
        color: green;
    }
    100%{
        opacity: 1;
        color: blue;
    }
}

引入react-transition-group模块使用

js代码

import React,{ Component,Fragment } from 'react';
import './test.css';//引入样式
import { CSSTransition,TransitionGroup } from 'react-transition-group';//引入react-transition-group模块

class Test3 extends Component{
    constructor(props){
        super(props);
        this.state={
            list:[],
            show:true
        }
        this.handleToggle=this.handleToggle.bind(this)
        this.handleAddItem=this.handleAddItem.bind(this)
    }

    render(){
        return(
            <Fragment>
                    <CSSTransition
                        in={this.state.show}// 如果this.state.show从false变为true，则动画入场，反之out出场
                        timeout={1000}//动画时间
                        classNames='fade'//自定义class名称
                        unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点
                        onEntered={(el)=>{el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                        onEnter={(el)=>{el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数
                        appear={true}//可选，dom节点一开始出现在页面上是否出现动画效果
                    >
                        <div>hello</div>
                    </CSSTransition>
                <button onClick={this.handleToggle}>改变hello动画</button> 
                
                
                 <TransitionGroup>
               {
                  
                    this.state.list.map((item,index)=>{
                        return(
                            <CSSTransition
                            key={index}
                                timeout={1000}//动画时间
                                classNames='fade'//自定义class名称
                                unmountOnExit//可选，当动画出场后在页面上移除包裹的dom节点
                                onEntered={(el)=>{el.style.color='blue'}}//可选，动画入场之后的回调，el指被包裹的dom，让div内的字体颜色等于蓝色
                                onEnter={(el)=>{el.style.color='red'}}//可选，el指被包裹的dom，动画一开始的样式回调函数
                                appear={true}//可选，dom节点一开始出现在页面上是否出现动画效果
                            >
                               <div>{item}</div>
                            </CSSTransition>
                           
                        )
                    })
               }
               </TransitionGroup>
                <button onClick={this.handleAddItem}>加内容出现动画效果</button>

            </Fragment>
        ) 
    }
    handleToggle(){
        this.setState({
            show:this.state.show?false :true
        })
    }
    handleAddItem(){
        this.setState((prevState)=>{
            return{
                list:[...prevState.list,'item']
            }
        })
    }
}

export default Test3;

test.css代码

.fade-enter,.fade-appear{opacity: 0;} /* enter是入场前的刹那（点击按钮），appear指页面第一次加载前的一刹那（自动） */
.fade-enter-active,.fade-appear-active{opacity: 1;transition: opacity 1s ease-in}  /* enter-active指入场后到入场结束的过程，appear-active则是页面第一次加载自动执行 */
.fade-enter-done,.fade-appear-done{opacity: 1;} /* 入场动画执行完毕后，保持状态 */


.fade-exit{opacity: 1;}/* 出场动画开始 */
.fade-exit-active{opacity: 0;transition: opacity 1s ease-in}/* 出场动画开始到结束的过程 */
.fade-exit-done{opacity: 0;}/* 出场动画执行完毕后，保持状态 */