终于轮到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一下吧！