react transition group

最近开始学习使用react,想把react学好学精,目前短期是打算通过react来重构我的小站。也就是之前给自己定的目标,因为后来和同校的学生做给校内学生提供查分等服务的小程序,结果等到今天才开始,哈哈。

我现在希望尽可能把每个曾经的功能模块更细化,做成可复用的组件,相当于弄个自己的UI组件库。然后其中有一个是蒙层。为了不那么突兀,所以我希望在卸载蒙层的时候看起来是淡出的,所以我需要和Vue类似的transition。

然后问题就来了,找到react官方提供的react-transition-group并没有花我很多时间,然而接下来因为文档是全英文的,读起来比Vue官方的中文文档肯定会费力很多,但是我还是懂了个大概,这中间花了多少时间我不说。。。总之相比读完Vue的相关文档之后立马上手立马奏效,还是很让我抓鸡。

最后我是用的CSSTransition。它关键的参数主要是in,timeout,以及classNames,还有一个unmountOnExit(之前我没有看每个参数的作用,结果靠多定义一个定时器手工实现的,后来才发现)。in是一个布尔变量,实质就是状态切换,比如从true => false,就会触发exit,对应的类名就会依次变为exit,exit-active,exit-done,通过css为这些类名设置style,搭配css 的transition属性就可以实现你想要的过渡效果。timeout顾名思义,就是状态变化的时长,比如从exit触发到exit-done中经历的时间,所以这个地方最好你css里transition也设置了同样的时间,它的单位为ms。classNames也比较好理解,比如你设置classNames为’fade’,那么触发状态变化时,对应的类名就是fade-exit,fade-exit-active。最后unmountOnExit,官方参数说明中已经讲得很清楚,

By default the child component stays mounted after it reaches the 'exited' state. Set unmountOnExit if you’d prefer to unmount the component after it finishes exiting.

意思就是,常理下你的子组件在达到exited(这里是transition文档里,csstransition继承了transition的参数,但是状态有一点不一样)状态后依旧处于挂载状态,就是你的组件并没有销毁。但如果你需要在组件达到exited状态后自动销毁,就添加这个参数。这正是我想要的,蒙层淡出后就自动销毁,如果不销毁,这个蒙层虽然已经透明,但是因为处于图层的顶层(position:fixed;z-index:10),直接挡住了我整个页面,导致我根本无法交互。

目前虽然可以使用了,但是我还没有把这个文档搞透彻,不说了,继续看。

https://reactcommunity.org/react-transition-group/

发表评论

电子邮件地址不会被公开。 必填项已用*标注