【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;
}

　大家動手試試吧