终于轮到Vue来启发React了吗？

react-transition-group今天在看react-transition-group的时候突然发现多了一个组件：咦？奇怪，我记得之前只有三个，更新的时候，好奇心驱使我点开了新出现的SwitchTransition，真是不敢相信，看到的时候惊呆了！考虑到大家的英语水平……（当然，这句话好像没有任何英语水平也能理解），我给大家翻译一下：这是一个受vuetransitionmodes启发的transitioncomponent。老实说，我经常同时使用vue和react。一直觉得vue的transition组件和react的react-transition-group很相似。几乎是不同的名字，用法也差不多。不知道是谁抄袭了谁，可能都是抄袭了Angular的动画库ng-animate。哦不，应该叫inspiration，whowasinspiredbywho（换个词有没有感觉瞬间高大上了），其实大家都开源，吸收好东西很好。一件事，但是因为vue一直给人的印象是一个非常好的参考而不是一个非常好的创新者，而React正好相反。所以大家下意识的认为是vue借鉴的react。直到今天才发现vue已经有的模式react-transition-group刚刚实现了，也就是vue的transition模式。其实vue官网已经介绍的很详细了，这里就不重复描述了，送大家一个传送门：vuetransitionmodes。总之，它实现了这样一个很酷的功能：当你的组件切换时，可以让要移除的组件和要移除的组件进入的组件有一个动画效果，两个动画效果之间有时间差.时差有两种模式。一种是先对要移除的组件进行动画处理，比如淡出。淡出后，新组件再次淡入。这个时间差形成了一套完整的淡入淡出效果，而另一种模式则完全相反，先是新的分量淡入，然后是旧的分量淡出。不过SwitchTransition是一个很酷的效果，在Vue中可以轻松实现，但是React中没有对应的封装组件，只能自己实现，于是SwitchTransition就横空出世了！使用方法首先，react的transition组件并没有像vue那样直接集成到vue核心库中，而是需要手动安装：#npmnpmireact-transition-group-S#yarnyarnaddreact-transition-group然后我们就来使用react模仿vue的官方案例///src/App.jsimportReact,{useState}from'react';import'./App.css';import{CSSTransition,SwitchTransition}from'react-transition-group'functionApp(){const[bool,setBool]=useState(false)constonClick=()=>setBool(b=>!b)return({bool?(on):(off)});}exportdefaultApp;/*/src/App.css*/.fade-enter,.fade-exit-active{opacity:0;}.fade-enter-active{opacity:1;}.fade-enter-active,.fade-exit-active{transition:opacity1s;}到此我们就实现了vue官网第一个过渡模式的例子↑↑↑，接下来我们来实现第二个例子↓↓↓//src/App.jsimportReact,{useState}from'react';import'./App.css';import{CSSTransition,SwitchTransition}from'react-transition-group'functionApp(){const[bool,setBool]=复制代码useState(false)constonClick=()=>setBool(b=>!b)return({bool?(on):(off)}