【React自制全家桶】八、React动画以及react-transition-group动画库的使用

React动画通常有三种方法实现从易到难为：

1、transition（CSS3自带）

2、animation（CSS3自带）

3、react-transition-group动画库（需要引入插件）

 

一、transition（CSS3自带）

1、用法示例：

.hide{
  /*过渡动画效果*/
　opacity: 1;
  transition: all 1s ease-in;
}

　含义：透明度在1s内从0渐变为1

 

2、transition其他参数

建议参考（http://www.runoob.com/cssref/css3-pr-transition.html）详细学习

transition-property	指定CSS属性的name，transition效果
transition-duration	transition效果需要指定多少秒或毫秒才能完成
transition-timing-function	指定transition效果的转速曲线
transition-delay	定义transition效果开始的时候

 

3、区别transform

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。所以，transform属性只对元素进行变换，不会产生过渡效果。

建议参考（http://www.runoob.com/cssref/css3-pr-transform.html）详细学习

 

 

二、animation（CSS3自带）

1、用法示例：

.hide{
  /*过渡动画效果*/
  animation: animation-name 2s ease-in forwards;
}
@keyframes animation-name {
  0% {
    opacity: 1;
    color: red;
  }
  50% {
    opacity: 0.5;
    color: blue;
  }
  100%{
    opacity: 0;
    color: yellow;
  }
}

　animation相对于transition的好处是可以一帧一帧的控制动画，自由度更高。

 

 

三、react-transition-group动画库（需要引入插件）

1、为什么要用react-transition-group？

因为有一些动画用animation和transition很难实现甚至不能实现，这时react-transition-group就非常必要啦

 

2、安装react-transition-group库

 

yarn add react-transition-group

 

3、官方文档地址：http://reactcommunity.org/react-transition-group/（强烈建议一定要先打开这个文档再继续向下阅读哦）

 react-transition-group库有三个可使用的组件：

• Transition
• CSSTransition
• TransitionGroup

（1）主要使用CSSTransition（单标签的动画）和TransitionGroup（多标签的动画）

（2）Transition是更接近底层的动画，当时用CSSTransition和TransitionGroup都不能实现需要的动画时可以考虑使用Transition

 

4、React使用示例：（核心部分均标蓝）

 js部分：

import React,{ Component , Fragment} from 'react';
// 引入react-transition-group动画组件
import { CSSTransition,TransitionGroup } from 'react-transition-group';
class AppTra extends Component{
    constructor(props){
        super(props);
        this.state = {
            list:[]
        };
        this.handleAddItem = this.handleAddItem.bind(this);
    }

    handleAddItem(){
        this.setState((prevState)=>{
            return{
                list: [...prevState.list,'666']
            }
        })
    }


    render(){
        return (
            // Fragment是占位符
            <Fragment>
                <TransitionGroup>
                {

                        this.state.list.map((item,index)=>{
                            return(
                                <CSSTransition
                                    in={this.state.show}
                                    //动画时间
                                    timeout={1000}
                                    // 前缀名注意S
                                    classNames='fade'
                                    unmountOnExit
                                    onEntered={(el)=>{
                                    el.style.color='blue'
                                    }}
                                    // 入场第一帧
                                    appear={true}

                                    key={index}
                                >
                                    <div>{item}</div>
                                </CSSTransition>
                            )
                        })
                }
                <button onClick={this.handleAddItem}>toggle</button>
                </TransitionGroup>
            </Fragment>
        )
    }
}

// 导出组件
export default AppTra

　　css部分：

/*入场动画*/
.fade-enter, .fade-appear{
    /*入场动画执行的第一个时刻*/
    opacity: 0;
}

.fade-enter-active, .fade-appear-active{
    /*入场动画执行的第二个瞬间一直到执行完成的时刻*/
    opacity: 1;
    transition: opacity 1s ease-in;
}

.fade-enter-done{
    /*入场动画执行完成之后*/
    opacity: 1;
    color: red;
}


/*出场动画*/
.fade-exit{
    opacity: 1;
}

.fade-exit-active{
    opacity: 0;
    transition: opacity 1s ease-in;
}

.fade-exit-done{
    opacity: 0;
}

　大家动手试试吧