react-transition-group

今天在查看react-transition-group的时候，突然发现多出来了一个组件：

react-transition-group
咦？奇怪，我记得以前明明只有仨啊，啥时候更新出来的，好奇心驱使我点了进去新出现的那个SwitchTransition，真是不看不得了，一看吓一跳啊！

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官网的第一个案例

至此我们就实现了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;
}

Vue官网的第二个案例

第一个例子是默认模式：mode="out-in"
看名字就很容易理解：旧组件先执行出场动画，然后新组件再执行入场动画。
第二个例子是：mode="in-out"
看动态图就明白了：先进后出。

在SwitchTransition组件上一共就只有mode这么一个属性，属性一共就只有俩值:out-in、in-out，如果是out-in的话甚至连属性都可以省略不写了，因为是默认属性。

注意事项

<SwitchTransition>组件里面要有<CSSTransition>或者<Transition>组件，不能直接包裹你想要切换的组件。
<SwitchTransition>里面的<CSSTransition>或<Transition>组件不再像以前那样接受in属性来判断元素是何种状态，取而代之的是key属性，<SwitchTransition>底层是通过key属性来判断组件该执行移入还是移出动画的。