在路线组件具有不同高度的路线之间，对幻灯片过渡做出反应

Question

我正在尝试创建一个“多向”网站，该网站允许您向下滚动，然后单击导航按钮，将当前显示的组件滑出屏幕，并将相关的新组件滑入屏幕。

我希望能够滑动新组件，使该组件的焦点位于顶部（“英雄区”），并将旧组件滑动到用户点击滑动的高度位置。

我已经达到了滑动效果，但是无法使新组件专注于顶部（“英雄部分”）。取而代之的是，它将在进行点击的旧组件的相同高度位置执行幻灯片。

要执行幻灯片，我要使用：  -react-router-dom  -react-router-page-transition

其中“开关”具有“ PageTransition”的包含元素，该元素将过渡效果应用于每个“路线”

关于如何实现幻灯片动画效果的任何想法，新组件可以从前一个组件的任何位置滑入，新组件的焦点都放在顶部（“英雄部分”）？

谢谢！

//Switch Container that is called within App.js
export default withRouter(function SwitchContainer({location}){
	return(
			<PageTransition timeout={1000}>
				<Switch location={location}>
					<Route exact path='/' component={LandingPage} />
					<Route exac path='/about-us' component={AboutUsPage} />
					<Route exact path='/contact-us' component={ContactUsPage} />
				</Switch>
			</PageTransition>
	)
}
)

.landing-page{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.landing-page.transition-appear{
	transform: translate3d(-100%, 0, 0);
}

.landing-page.transition-appear.transition-appear-active{
	transform: translate3d(0,0,0);
	transition: all 1s ease-in-out;
}

.landing-page.transition-leave{
	transform: translate3d(0,0,0);
}

.landing-page.transition-leave.transition-leave-active{
	transform: translate3d(100%,0,0);
	transition: all 1s ease-in-out;
}

.about-us-page{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
}

.about-us-page.transition-appear{
	transform: translate3d(-100%, 0, 0);
}

.about-us-page.transition-appear.transition-appear-active{
	transform: translate3d(0,0,0);
	transition: all 1s ease-in-out;
}

.about-us-page.transition-leave{
	transform: translate3d(0,0,0);
}

.about-us-page.transition-leave.transition-leave-active{
	transform: translate3d(100%,0,0);
	transition: all 1s ease-in-out;
}

.contact-us-page{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.contact-us-page.transition-appear{
	transform: translate3d(-100%,0,0);
}

.contact-us-page.transition-appear.transition-appear-active{
	transform: translate3d(0,0,0);
	transition: all 1s ease-in;
}

.contact-us-page.transition-leave{
	transform: translate3d(0,0,0);
}

.contact-us-page.transition-leave.transition-leave-active{
	transform: translate3d(100%,0,0);
	transition: all 1s ease-in;
}