前端4 --- 第三方库实现动画效果（react）

react-transition-group
react官方提供的动画过渡库，有着完善的API文档

包含三个核心库
-Transition
-CSSTransition
-TransitionGroup

1.CSSTransition

/**    
 * CSSTransition 实现颜色变化
 * 动画库 { react-transition-group 需要安装}
 */

import React from 'react'
import './css_transitionGroup.css';
import { CSSTransition } from 'react-transition-group';

export default class Boss2 extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            isShow:true
        }
    }
    render(){
        return(
            <div>
                 <CSSTransition 
	                in={this.state.isShow}   //用于判断是否出现的状态
	                timeout={2000}           //动画持续时间
	                classNames="boss-text"   //className值，防止重复
	             >
	                 <h1>渐进渐出</h1>
	            </CSSTransition>
                <div><button onClick={this.toToggole}>召唤Boss</button></div>
            </div>
        )
    }
    toToggole = () => {
        this.setState({
            isShow:this.state.isShow?false:true
        })
    }
}

/**
css
transition 过渡效果
opacity 透明度
*/
.boss-text-enter{opacity: 0;}
.boss-text-enter-active{opacity: 1;transition: opacity 2000ms;}
.boss-text-enter-done{opacity: 1;}
.boss-text-exit{opacity: 1;}
.boss-text-exit-active{opacity: 0;transition: opacity 2000ms;}
.boss-text-exit-done{opacity: 0;}

2.TransitionGroup 多dom

<ul ref={(ul)=>{this.ul=ul}}>
    <TransitionGroup>
    {
        this.state.list.map((item,index)=>{
            return (
                <CSSTransition
                    timeout={1000}
                    classNames='boss-text'
                    unmountOnExit
                    appear={true}
                    key={index+item}  
                >
                    <ItemComponent //组件
	                    content={item}
	                    index={index}
	                    deleteItem={this.deleteItem.bind(this)}
                    />
                </CSSTransition>
            )
        })
    }
    </TransitionGroup>
</ul>  
<button onClick={this.toToggole}>召唤Boss</button>

藏之介白石❀