What is causing my div to transition repeatedly from the bottom to the top instead of the center position?

Question

What is causing my div to transition repeatedly from the bottom to the top instead of the center position?

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.

css reactjs tailwind-css transition

Answer 1

Answer №1

Instead of using translateY to move the element vertically, consider transitioning the height and width properties. Below is a demo in vanilla javascript and CSS showcasing this effect in full screen:

let red=document.querySelector('.red');
let green=document.querySelector('.green');

function translateY(){
  red.classList.toggle('translateY');
}
function transitionHW(){
  green.classList.toggle('transitionHW');
  red.classList.toggle('hide');
}

body{
  margin:0;
  width:auto;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:100px;
  height:100px;
}
.red{
  background-color:red;
  transition:transform 500ms;
}
.green{
  background-color:green;
  transition:height 500ms,width 500ms;
}
.translateY{
  transform:translateY(-100%);
}
.transitionHW{
  height:100vh;/*the new wanted height*/
  width:100vw;/*the new wanted width*/
  transition:height 500ms,width 500ms;

}
.hide{
  display:none;
}

<div class="box red">
  <button id="y" onclick='translateY()' >move Y</button>
</div>
<div class="box green">
  <button id="HW" onclick='TransitionHeightWidth()' >transition height & Width</button>
</div>

You can achieve the same effect by writing Tailwind utility classes although I'm not an expert in that specific area.

Answer 2

Instead of using translateY to move the element vertically, consider transitioning the height and width properties. Below is a demo in vanilla javascript and CSS showcasing this effect in full screen:

let red=document.querySelector('.red');
let green=document.querySelector('.green');

function translateY(){
  red.classList.toggle('translateY');
}
function transitionHW(){
  green.classList.toggle('transitionHW');
  red.classList.toggle('hide');
}

body{
  margin:0;
  width:auto;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
.box{
  width:100px;
  height:100px;
}
.red{
  background-color:red;
  transition:transform 500ms;
}
.green{
  background-color:green;
  transition:height 500ms,width 500ms;
}
.translateY{
  transform:translateY(-100%);
}
.transitionHW{
  height:100vh;/*the new wanted height*/
  width:100vw;/*the new wanted width*/
  transition:height 500ms,width 500ms;

}
.hide{
  display:none;
}

<div class="box red">
  <button id="y" onclick='translateY()' >move Y</button>
</div>
<div class="box green">
  <button id="HW" onclick='TransitionHeightWidth()' >transition height & Width</button>
</div>

You can achieve the same effect by writing Tailwind utility classes although I'm not an expert in that specific area.

What is causing my div to transition repeatedly from the bottom to the top instead of the center position?

Answer №1

Similar questions

Browserify is having trouble locating the npm module

Implementing child components in React using TypeScript and passing them as props

Error Encountered: An <Route> should always serve as a child element within a <Routes> container, not displayed independently. Kindly encase your <Route> within a <Routes> element

How can we create lists using parentheses specifically with Javascript or jQuery?

Issues with CSS not being applied when the page content exceeds the viewport

CSS - Creating a Gradient Effect on div Borders for a Transparent Fade Effect across a Specified Distance

Testing a React component to ensure that it correctly handles clicks occurring outside

The surprising outcomes of using Map and If statements together

Invoking two asynchronous functions in React, where the first function relies on the state modified by the second function

The requested module cannot be located, were you referring to "js" instead?

Tips for customizing the appearance of Material UI's time picker diolog styles

Guide on Triggering a Custom Popup Message upon a Server Action in Next.js

What could be causing my Material UI Table to disappear when I toggle the "Show" option?

Exploring the world of CSS and designing layouts using multiple div elements

How to show multiline error messages in Materials-UI TextField

Troubleshooting AngularJS Directives' Cross-Origin Problems within Eclipse

Tips for resolving a sluggish webpage with database content

Adjusting image dimensions before delivery for a mobile site

Can you explain the exact purpose of npm install --legacy-peer-deps? When would it be advisable to use this command, and what are some potential scenarios where it

Issue with Axios code execution following `.then` statement