终于轮到Vue来启发React了吗?
时间:2023-04-05 00:21:17
HTML5
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)}
);}exportdefaultApp;/*/src/App.css*/.fade-enter{opacity:0;transform:translateX(100%);}.fade-enter-active{transform:translateX(0);不透明度:1;}.fade-ex它{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;顶部:0;left:0;}第一个例子是默认mode:mode="out-in"看名字很容易理解:老组件先执行退出动画,新组件再执行进入动画。第二个例子是:mode="in-out"看动态图就可以理解:先进后出。SwitchTransition组件上只有一个mode属性,该属性只有两个值:out-in和in-out。如果是out-in,连属性都可以省略,因为是默认属性。注意:
组件内部必须有或组件,不能直接包裹要切换的组件。中的或组件不再像以前那样接受in属性来确定元素的状态,而是接受key属性。的底层使用key属性来决定组件是否应该被移入。移出动画。结论如何?是不是很有趣?带大家复习了下Vue,顺便学习一下react-transition-group的新组件。快速打开命令行创建一个react-app然后yarnaddreact-transition-group。!