終於輪到Vue來帶給React靈感了？

react-transition-group

今天在查看react-transition-group的時候，突然發現多出來了一個組件：

咦？奇怪，我記得以前明明只有仨啊，啥時候更新出來的，好奇心驅使我點了進去新出現的那個SwitchTransition，真是不看不得了，一看嚇一跳啊！

考慮到大家的英文水平…(當然這句話好像不用啥英語水平都能看懂)，我來給大家翻譯一下：這是一個受到vue transition modes啓發的過渡組件。說實話vue和react我都經常用，一直都覺得vue的transition組件和react的react-transition-group可像可像的了，幾乎就是換了個別名，用法啥的都差不多，也不知道到底是誰抄的誰，也許他倆都是抄的Angular的動畫庫ng-animate。哦不對，應該叫啓發，是誰受到了誰的啓發(有沒有感覺換了一個詞瞬間就變得高大上了起來)，其實本來大家都是開源的，把好的東西吸收借鑑過來是非常好的一件事情，但是由於vue一直給人的印象都是一個非常優秀的借鑑者而不是非常優秀的創新者，而React恰恰相反。所以大家潛意識裏一直以爲是vue借鑑的react，直到今天我才發現原來vue早已擁有的模式，react-transition-group纔剛剛實現，那就是過渡模式

vue的transition

其實vue的官網描述的已經非常詳細了，所以在這裏我就不再重複敘述了，給大家一個傳送門：vue transition modes，總而言之它實現了這麼一個炫酷的功能：在你的組件切換的時候，可以讓將要移除的組件和將要進入的組件有個動畫效果，這兩個動畫效果還有個時間差，時間差有兩種模式，一是將要移除的組件先來個動畫，比如淡出，等它淡出完了，新的組件再淡入，這樣的時間差形成了完整的一套淡入淡出效果，另一種模式則完全相反，先新的組件淡入，再把老組件淡出。

SwitchTransition

然而就是在vue中很輕鬆就可以實現的炫酷效果在react中卻沒有對應的封裝好的組件，只能自己很麻煩的實現，於是乎SwitchTransition橫空出世啦！

用法

首先react的過渡組件並不像vue那樣直接集成在vue核心庫之中，而是需要手動的去安裝：

#npm
npm i react-transition-group -S

#yarn
yarn add react-transition-group

接着我們就來用react來模仿一下vue的官方案例

//  /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () => setBool(b => !b)
  return (
    <SwitchTransition>
      <CSSTransition classNames="fade" timeout={1000} key={bool ? "on" : "off"}>
        {
          bool ? (<button onClick={onClick}>on</button>)
               : (<button onClick={onClick}>off</button>)
        }
      </CSSTransition>
    </SwitchTransition>
  );
}

export default App;

/* /src/App.css */
.fade-enter, .fade-exit-active {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-enter-active, .fade-exit-active {
  transition: opacity 1s;
}

至此我們就實現了vue官網過渡模式的第一個例子↑↑↑，接下來我們實現第二個例子↓↓↓

//  /src/App.js
import React, { useState } from 'react';
import './App.css';
import { CSSTransition, SwitchTransition } from 'react-transition-group'

function App() {
  const [ bool, setBool ] = useState(false)
  const onClick = () => setBool(b => !b)
  return (
    <div className="relative">
      <SwitchTransition mode="in-out">
        <CSSTransition classNames="fade" timeout={500} key={bool ? "on" : "off"}>
          {
            bool ? (<button className="btn" onClick={onClick}>on</button>)
                : (<button className="btn" onClick={onClick}>off</button>)
          }
        </CSSTransition>
      </SwitchTransition>
    </div>
  );
}

export default App;

/* /src/App.css */
.fade-enter {
  opacity: 0;
  transform: translateX(100%);
}
.fade-enter-active {
  transform: translateX(0);
  opacity: 1;
}
.fade-exit {
  transform: translateX(0);
}
.fade-exit-active {
  opacity: 0;
  transform: translateX(-100%);
}
.fade-enter-active, .fade-exit-active {
  transition: opacity .5s, transform .5s;
}
.relative {
  position: relative;
}
.btn {
  position: absolute;
  top: 0;
  left: 0;
}

• 第一個例子是默認模式：mode=“out-in”
  看名字就很容易理解：舊組件先執行出場動畫，然後新組件再執行入場動畫。
• 第二個例子是：mode=“in-out”
  看動態圖就明白了：先進後出。

在SwitchTransition組件上一共就只有mode這麼一個屬性，屬性一共就只有倆值:out-in、in-out，如果是out-in的話甚至連屬性都可以省略不寫了，因爲是默認屬性。

注意事項

1. <SwitchTransition>組件裏面要有<CSSTransition>或者<Transition>組件，不能直接包裹你想要切換的組件。
2. <SwitchTransition>裏面的<CSSTransition>或<Transition>組件不再像以前那樣接受in屬性來判斷元素是何種狀態，取而代之的是key屬性，<SwitchTransition>底層是通過key屬性來判斷組件該執行移入還是移出動畫的。

結束語

怎麼樣是不是很好玩呢，帶大家複習了一遍Vue的同時順便又學習了一下react-transition-group的新組件，趕緊打開命令行create個react-app然後yarn add react-transition-group一下吧！