摘要：一一個(gè)官網(wǎng)提供的動(dòng)畫過(guò)度庫(kù)。安裝而官方提供的三個(gè)組建。下面來(lái)看一個(gè)例子效果是增加和刪除列表項(xiàng)中的一個(gè)，產(chǎn)生漸入漸失的效果說(shuō)白了也就是多個(gè)或者組合的效果。

搜索了網(wǎng)上關(guān)于react動(dòng)畫的，很多的答案都是很久以前的了老版本了，而現(xiàn)在官方提供的是叫react-transition-group 它是以前兩個(gè)的合體版本，所以寫下這個(gè)記錄一下，同時(shí)也給一些需要的猿門給一些小的提示。
1、安裝

# npm
npm install react-transition-group --save

# yarn
yarn add react-transition-group

而官方提供的三個(gè)組建Transition,CSSTransition,TransitonGroup。

過(guò)渡組件(Transiton)允許您用一個(gè)簡(jiǎn)單的聲明性API描述隨著時(shí)間的推移從一個(gè)組件狀態(tài)到另一個(gè)組件狀態(tài)的轉(zhuǎn)換。最常用的是用來(lái)動(dòng)畫一個(gè)組件的安裝和卸載，但也可以用來(lái)描述在適當(dāng)?shù)倪^(guò)渡狀態(tài)。默認(rèn)情況下，該組件不會(huì)更改其呈現(xiàn)的組件的行為，它只跟蹤組件的“進(jìn)入”和“退出”的狀態(tài)。由你來(lái)為這些狀態(tài)定義效果。（翻譯）
實(shí)際的情況就是你如果只寫這個(gè)組件是沒(méi)有任何的效果的，就和你寫一個(gè)div一樣。所以你需要給他們賦予一些參數(shù)才可以。例如下面這個(gè)例子

//自己簡(jiǎn)單的封裝了一個(gè)，該有的參數(shù)都由了，可以自行粘貼在自己的代碼里面去試試。
class Fade extends React.Component {
  constructor(props) {
    super(props);
  }
  done =() => {
    // console.log("結(jié)束了")
  }
  addaddEndListener = (node) => { //原生時(shí)間transition運(yùn)動(dòng)的事件
    node.addEventListener("transitionend", this.done, false);
  }

  // 三個(gè)進(jìn)入狀態(tài)的事件，可以做你想做的事情
  onEnter = (node, isAppearing) => {
    console.log(isAppearing, "onEnter")
  }
  onEntering = (node, isAppearing) => {
    console.log(isAppearing, "onEntering")
  }
  onEntered = (node, isAppearing) => {
    console.log(isAppearing, "onEntered")
  }

  // 三個(gè)退出的狀態(tài)的事件
  onExit = (node) => {
    console.log("onExit")
  }
  onExiting = () => {
    console.log("onExiting")
  }
  onExited = () => {
    console.log("onExited")
    this.props.self()
  }
  render() {
    const { in: inProp, dur} = this.props;
    const defaultStyle = {
      transition: `transform ${300}ms ease-in-out, opacity ${300}ms ease-in-out`,
      transform: "translateX(100px)",
      opacity: "0"
    }

    const transitionStyles = {
      entering: { transform: "translateX(100px)", opacity: "0"},
      entered:  { transform: "translateX(0px)", opacity: "1" },
      exiting: {transform: "translateX(0px)", opacity: "1"},
      exited: {transform: "translateX(0px)", opacity: "0"}
    };
    const duration = {
      enter: 300,
      exit: 300,
    }
    // 上面的都是基本參數(shù)，樣式的轉(zhuǎn)變以及時(shí)間的設(shè)定，具體的可以看官網(wǎng)文檔
    // 樣式也可以寫成className 例如
    return (
      
        {
          state => {
            console.log(state, "###") //你可以很直觀的看到組件加載和卸載時(shí)候的狀態(tài)
            return(
              

                {this.props.children}
              
            )
          }
        }
      
    );
  }
}

其中上面的狀態(tài)有四種：

entering
entered
exiting
exited

組件的初始化狀態(tài)都停留在exited
上面就是寫的一個(gè)最基本的例子，下面是如何的調(diào)用

let num = 1;
class Dnd extends React.Component {
  state = {
    ins: true,
    current: 1,
    dom: 

            ceshi weizhi {num}
          
  }
  handle = (bool) => {
    this.setState({
      test: !bool
    })
  }
  end = () => {
    const that = this;
    num = num + 1;
    setTimeout(function () {
      that.setState({
        test: true,
        dom: 

              888888 {num}
            
      }) 
    }, 500)
    
  }
  render () {
    const { location } = this.props
    const { test } = this.state;
    return (
      
        點(diǎn)擊transition
        
          {this.state.dom}
        
      
    )
  }
}
// 效果是每次點(diǎn)擊按鈕都會(huì)進(jìn)行一次進(jìn)場(chǎng)和出場(chǎng)的動(dòng)畫。也可以自行衍生。

這個(gè)組件大概就是這樣的，這樣適合寫一個(gè)tab類型的頁(yè)面，在切換的時(shí)候可以展示不同的dom

此組件是在轉(zhuǎn)換的出現(xiàn)、進(jìn)入、退出階段應(yīng)用一對(duì)類名(也就是className),靠這個(gè)來(lái)激活CSS動(dòng)畫。所以參數(shù)和平時(shí)的className不同，參數(shù)為：classNames
參數(shù)：（主要）in, timeout, unmountOnExit, classNames, 用法同Transition?？慈缦吕樱?/p>

state  = {
    star: false
}


start

  
?

效果是點(diǎn)擊button 顯示星星，在點(diǎn)擊消失星星的動(dòng)畫！
參數(shù)classNames="star", 組件會(huì)找對(duì)應(yīng)狀態(tài)的className, 如下

.star {
    display: inline-block;
    margin-left: 0.5rem;
    transform: scale(1.25);
  }
  .star-enter {
    opacity: 0.01;
    transform: translateY(-100%) scale(0.75);
  }
  .star-enter-active {
    opacity: 1;
    transform: translateY(0%) scale(1.25);
    transition: all 300ms ease-out;
  }
  .star-exit {
    opacity: 1;
    transform: scale(1.25);
  }
  .star-exit-active {
    opacity: 0;
    transform: scale(4);
    transition: all 300ms ease-in;
  }

依次執(zhí)行的順序是

1、星星顯示 對(duì)應(yīng)的class為star-enter star-enter-active 動(dòng)畫走完為star-enter-done
2、星星消失 對(duì)應(yīng)的class為star-exit  star-exit-active 動(dòng)畫走完為star-exit-done

如果按照官網(wǎng)的解釋就是如下， 有興趣的可以自行去試一試。

classNames={{
 appear: "my-appear",
 appearActive: "my-active-appear",
 enter: "my-enter",
 enterActive: "my-active-enter",
 enterDone: "my-done-enter,
 exit: "my-exit",
 exitActive: "my-active-exit",
 exitDone: "my-done-exit,
}}

每個(gè)階段的鉤子函數(shù)同Transition.

一看group就知道肯定是列表形態(tài)的動(dòng)畫了！但是看了官網(wǎng)后知道，TransitionGroup不提供任何形式的動(dòng)畫，具體的動(dòng)畫取決與你包裹的Transition || CSSTransition的動(dòng)畫，所以你可以在列表里面做出不同類型的動(dòng)畫出來(lái)。下面來(lái)看一個(gè)例子

class List extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, text: "Buy eggs" },
        { id: 2, text: "Pay bills" },
        { id: 3, text: "Invite friends over" },
        { id: 4, text: "Fix the TV" },
      ]
    }
  }

  render() {
    const { items } = this.state; 
    return (
      

        
          {items.map(({ id, text }) => (
            
              

                 {
                    this.setState(state => ({
                      items: state.items.filter(
                        item => item.id !== id
                      ),
                    }));
                  }}
                >
                  ×
                
                {text}
              
            
          ))}
        
         {
            const text = prompt("Enter some text");
            if (text) {
              this.setState(state => ({
                items: [
                  ...state.items,
                  { id: 1123, text },
                ],
              }));
            }
          }}
        >
          Add Item
        
      
    );
  }
}

css

.fade-enter {
    opacity: 0.01;
  }
  .fade-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  .fade-exit {
    opacity: 1;
  }
  .fade-exit-active {
    opacity: 0.01;
    transition: opacity 500ms ease-in;
  }

效果是增加和刪除列表項(xiàng)中的一個(gè)，產(chǎn)生漸入漸失的效果！說(shuō)白了也就是多個(gè)Transition 或者CSSTransition組合的效果。
但是也提供一些參數(shù)

1、component  default "div" 也就是TransitionGroup渲染出來(lái)的標(biāo)簽為div，也可以就行更改，例如component="span" 渲染出來(lái)的就是span標(biāo)簽了
2、children 相當(dāng)于你給的組件，可以是字符串或者自定義組件等。
3、appear  寫在TransitionGroup里面相當(dāng)于開啟或者禁止里面的Transition || CSSTransition 方便寫的作用

三個(gè)組件大概的特性就是這些。剩下的全靠自己去開發(fā)了！后續(xù)會(huì)錄入一些小的例子來(lái)講解，敬請(qǐng)期待。。。。