react中动画的实现

准备一个显示隐藏的框架

import React,{ Component,Fragment } from 'react';

class TodoList extends Component {
    //constructor中设置state的数据结构
    constructor(props) {
        super(props);
        this.state = {
            show : 'true'
        }
        this.handleClick = this.handleClick.bind(this)
    }
    render() {
        return (
            <Fragment>
               <div className={this.state.show ? 'show' : 'hide'}>123</div>
                <button onClick={this.handleClick}>toggle</button>
            </Fragment>
        )
    }
    handleClick(){
        this.setState({
            show: this.state.show ? false : true
        })
    }
}
export default TodoList;

1. 使用css3实现过渡动画效果

   	//style.css如果需要引入此文件
   	.show {
   	    opacity: 1;
   	    transition: all 1s ease-in;
   	}
   	.hide {
   	    opacity: 0;
   	    transition: all 1s ease-in;
   	}
   	```
   

2. 使用css3实现动画效果

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

3.使用react-transition-group 实现动画
首先需要安装react-transition-group，在控制台中输入npm install react-transition-group --save
然后我们需要在顶部引入import { CSSTransition } from 'react-transition-group';
最后在需要使用的地方使用

<CSSTransition
	//在什么时候使用动画
    in={this.state.show}
    //动画时长
    timeout={1000}
    //class的名字，注意这里的名字必须与style中样式的开头一致
    classNames="fade"
    //移除dom
    unmountOnExit
    //入场动画结束之后自动执行
    onEnter={(el) => el.style.color = 'blue'}
    //刚进入页面执行
    appear={true}
>
    <div>123</div>
</CSSTransition>

在style.css中写入样式

/*入场动画*/
.fade-enter,.fade-appear{
    opacity: 0;
}
.fade-enter-active,.fade-appear-active{
    opacity: 1;
    transition: opacity 1s ease-in;
}
.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;
}

4. 如何使用react-transition-group 实现多个动画
   首先引入TransitionGroup
   然后用<TransitionGroup></TransitionGroup>将代码包裹起来
   最后使用<CSSTransition></CSSTransition>将每一个要动画的代码包起来即可
   完整代码：

import React,{ Component,Fragment } from 'react';
import { CSSTransition,TransitionGroup } from 'react-transition-group';
import './style.css';
class TodoList extends Component {
    //constructor中设置state的数据结构
    constructor(props) {
        super(props);
        this.state = {
           list: []
        }
        this.handleAddItem =this.handleAddItem.bind(this)
    }
    render() {
        return (
            <Fragment>
                <TransitionGroup>
                    {
                        this.state.list.map((item,index) => {
                            return(
                                <CSSTransition
                                    timeout={1000}
                                    classNames="fade"
                                    unmountOnExit
                                    onEnter={(el) => el.style.color = 'blue'}
                                    appear={true}
                                    key={index}
                                >
                                 <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                    }
                    <button onClick={this.handleAddItem}>toggle</button>
                </TransitionGroup>
            </Fragment>
        )
    }
    handleAddItem(){
        this.setState((prevState) => {
            return {
                list: [...prevState.list,'item']
            }
        })
    }
}
export default TodoList;

样式文件还是和上面一样的，无需更改！