终于轮到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核心库之中，而是需要手动的去安装：

接着我们就来用react来模仿一下vue的官方案例：

至此我们就实现了vue官网过渡模式的第一个例子↑↑↑接下来我们实现第二个例子↓↓↓

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

在SwitchTransition组件上一共就只有mode这么一个属性，属性一共就只有俩值:out-

in、in-out，如果是out-in的话甚至连属性都可以省略不写了，因为是默认属性。

注意事项：

在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题，

本文章由javascript技术分享原创和收集