終於輪到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一下吧！