Currently, I am using React and Tailwind CSS and facing an issue with the transition property. My goal is to have a div grow in width and height from the center until it covers the entire viewport when a specific state variable becomes true. The content inside the div should stay in place while only expanding.
The problem I'm encountering is that no matter what type of transition I attempt (such as scale or transitioning y and x), the div keeps expanding from the bottom to the top of the viewport.
Below is a snippet of my code:
<div
className={`z-10 px-8 pb-6 pt-10 text-white transition-all duration-500 ${slideTransition ? "translate-y-[50%]": "translate-y-0"}
${isFullscreen ? "absolute inset-0 transition-all transform origin-center duration-[1s] ease-in-out": "relative"}
${fullscreenTransition ? 'max-h-screen' : 'max-h-full'}`}
>
This is how I trigger the fullscreenTransition state change:
const triggerFullscreenTransition = () => {
if (isFullscreen) return true
else return false
}
While the state change seems to be functioning correctly, the transition effect causes the div to slide upwards instead of growing from the center. Any assistance would be greatly appreciated.