如何解决React过渡不会触发最后一条路线
我正在使用React转换组和React路由器dom创建页面转换,这与我数组中的最后一条路由相去甚远,我将在下面记录我的代码。这是我创建路线的方式。
{routes.map(({ path,name,Component,enter,exit}) => (
<Route key={name} path={path} exact>
{({ match }) => (
<CSSTransition
in={match != null}
timeout={1650}
classNames='page'
unmountOnExit
onExit={(props) => onExit(props,exit)}
onEnter={(props) => onEnter(props,enter)}>
<Component path={path} />
</CSSTransition>
)}
</Route>
))}
这是我构建路线数组的方式。我只列出了证明此问题的路线。它们都使用相同的组件,因为它们是同一页面,只是具有不同的信息和图像。
const routes = [
{ path: '/work/ep1',name: 'ep1',Component: SingleWork,enter: 's_work_enter',exit: 's_work_exit' },{ path: '/work/ep2',name: 'ep2',{ path: '/work/ep3',name: 'ep3',{ path: '/work/ep4',name: 'ep4',{ path: '/work/ep5',name: 'ep5',{ path: '/work/ep6',name: 'ep6',];
我提供了用于进入和退出的值,因为我正在根据要转换的页面更改转换效果。
下面是处理我的退出过渡的代码,我认为这并不重要,但我想最好也提供它。
const onExit = (node,exit) => {
if (exit === 's_work_exit') {
gsap.timeline()
.set(pageRef.current,{css:{className: '+=grey-video page'}})
.to(node.children[0].children['single-work--video-container'].children.videoBigPlayBtn,0.1,{ opacity: 0 })
.to(node.children[0].children['single-work--video-container'].children[0],0.8,{ scaleX:0.9,scaleY:0.9,rotate: 1,ease: "circ.inOut" })
.to(node.children[0].children['single-work--info-container'].children['single-work--info-next'].children['single-work--next-container'],{opacity: 0},'-=0.3')
}
};
在每个页面上都有指向下一页的链接,因此,如果您位于路径:“ / work / ep1”,则该链接指向路径:“ / work / ep2”,依此类推。
这很好,直到您到达数组的最后一页,即路径:'/ work / ep6',它链接回路径:'/ work / ep1'-在这种情况下,退出动画不会触发,并且页面只是立即退出,这是我不知道的问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。