Реагировать на слайд-переход между маршрутами, где компоненты маршрута имеют разную высоту - PullRequest
Новая
       62

Реагировать на слайд-переход между маршрутами, где компоненты маршрута имеют разную высоту

0 голосов
/ 04 октября 2018

Я пытаюсь создать «разнонаправленный» веб-сайт, который позволяет вам прокручивать вниз и одним нажатием навигационной кнопки сдвигать текущий отображаемый компонент с экрана и соответствующий новый компонент на экран.

Я хочу иметь возможность перемещать новый компонент, где фокус на этом компоненте находится сверху («раздел героя»), и выдвигать старый компонент в положение высоты, где пользователь сделал щелчок, чтобы скользить,

Я добился эффекта слайда, но не смог заставить новый компонент сосредоточиться на вершине («раздел героя»).Вместо этого он выполнит слайд в той же позиции по высоте, что и старый компонент, на котором был сделан щелчок.

Для выполнения слайда я использую: -react-router-dom -react-router-page-transition

Где «Switch» имеет содержащий элемент «PageTransition», который применяет эффект перехода к каждому «Route»

Любые идеи о том, как я могу добиться эффекта анимации слайдов, когда новыйКомпонент вставляется откуда угодно на предыдущем компоненте, и фокус новых компонентов находится сверху («раздел героя»)?

Заранее спасибо! 

//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;
}
...