I'm designing a website with ReactJS and Typescript and I want the pages each to live on a Card and when the user uses the Navigation bar, the current card slides away and the new one slides in. I am using react-transition-group to accomplish this. I eventually want to add direction to it, but I'm stuck at an earlier hurdle.
It's all working well, the current route exists, the new one loads off-screen, the current one slides away and the new one slides in.
My problem is that the new component is rendering on a new line each time - not inline with the current one. This causes a jerky jump down and then up.
I have tried to fix it by making my parent container display: flex; and each of my children flex: 1, but as you can imagine, this causes some really weird results mid-transition with the width of both components. I also tried to fix that by changing the flex to flex: 1 1 100% and some other variants, but to no avail.
I did put my App.tsx here, but honestly - it doesn't feel that relevant. If you feel like you need it though - just let me know. The basic structure is:
<div id='main>
<Route exact path={path} key={title}>
<CSSTransition
classNames='mainCard'
nodeRef={refQuery}
unmountOnExit
>
<div
className='mainCard'
ref={refQuery}
>
<Component />
</div>
</CSSTransition>
...
</Route>
</div>
and my _animations.scss has:
.mainCard-enter {
transform: translateX(100%);
}
.mainCard-enter-active {
transform: translateX(0%);
transition-delay: 0.6s;
transition: transform 0.3s ease-in;
}
.mainCard-exit {
transform: translateX(0%);
}
.mainCard-exit-active {
transform: translateX(-100%);
transition: transform 0.3s ease-out;
}
Then, in my custom.scss, I've been trying to fix the problem with:
#main {
display: flex;
justify-content: space-between;
.mainCard {
flex: 1
}
}
I also gave it a go with css grid, but it's not something that I've had much practice with so I couldn't work it out.
NOTE: This project uses Bootstrap, so if you have a class-y (See what I did there?) way to fix it - I'm good with that too.
Pleases and thank yous in advance!
