react-transition-group今天在看react-transition-group的时候突然发现多了一个组件：咦？奇怪，我记得以前只有三个，什么时候更新的？好奇心驱使我点进去了，新出现的SwitchTransition真是让人匪夷所思。我看到的时候惊呆了！考虑到大家的英语水平……（当然，这句话在没有任何英语水平的情况下似乎也能理解）。让我为您翻译一下：这是一个受vue过渡模式启发的过渡组件。老实说，我经常同时使用vue和react。一直觉得vue的transition组件和react的react-transition-group很相似。几乎是不同的名字，用法也差不多。不知道是谁抄袭了谁，可能都是抄袭了Angular的动画库ng-animate。哦~不对，应该叫inspiration，谁被谁启发了（有没有感觉换个词就瞬间高大上了），其实大家都是开源的，吸收好的东西很重要。一个好东西，但是因为Vue一直给人的印象是它是一个很好的参考而不是一个很好的创新者，而React正好相反。所以大家下意识的认为是vue借鉴的react。直到今天才发现vue已经有的模式react-transition-group刚刚实现了，也就是vue的transition模式。其实vue官网已经介绍的很详细了，这里就不重复描述了，送大家一个传送门：vuetransitionmodes。总之，它实现了这么酷的功能：当你的组件切换时，可以让要移除的组件和要移除的组件进入的组件有一个动画效果，两个动画效果之间有时间差.时差有两种模式。一种是先对要移除的组件进行动画处理，比如淡出。淡出后，新组件再次淡入。这个时间差形成了一套完整的淡入淡出效果，而另一种模式则完全相反，先是新的分量淡入，然后是旧的分量淡出。不过SwitchTransition是一个很酷的效果，在Vue中可以轻松实现，但是React中没有对应的封装组件，只能自己实现，于是SwitchTransition就横空出世了！使用方法：首先，react的transition组件并没有像vue那样直接集成到vue核心库中，而是需要手动安装：然后我们就用react来模仿vue的官方案例：至此我们已经实现了vue官网过渡模式第一个例子↑↑↑接下来我们实现第二个例子↓↓↓第一个例子是默认模式：mode="out-in"看名字就很容易理解：老组件执行先退出动画，然后新组件执行进入动画。第二个例子是：mode="in-out"看动态图就可以理解：先进后出。SwitchTransition组件上只有一个mode属性，该属性只有两个值：out-in和in-out。如果是out-in，连属性都可以省略，因为是默认属性。注意：
