What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

Question

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

After configuring my code to display a component in the HTML only if a specific hook is set to true, I encountered an issue with a CSS transition. The problem arises because the 'open' class is triggered at the same time the element becomes true, causing the transition to not work as expected. I've explored timed delays as a solution but they also don't seem to solve the issue.

// Hook for setting state
      const [mealOne_box, mealOne_boxSet] = useState(false);
      const [box_transition, setbox_transition] = useState(false);
      const [scroll, scrollSet] = useState(false);

// Prevent body scrolling behind popup
     if (scroll) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }

// Handle clicks for popup
      const mealOneClickHandler = (event) => {
            mealOne_boxSet(!mealOne_box);
            scrollSet(!scroll)
            setbox_transition(!box_transition)
        }


// Popup element

  {mealOne_box && (
                <div className='meal_popup'>
                    <div className={box_transition ? 'meal_popupElement open' : 'meal_popupElement'}>
                        <CancelIcon onClick={mealOneClickHandler} />
                        <img alt='' src={PancakeImage} />
                        <div className='text_scroll'>
                            <h2>Method:</h2>
                            <p>blablabla</p>
                        </div>
                    </div>
                    <div onClick={mealOneClickHandler} className='meal_popupBackground' />
                </div>
            )}




// CSS Styles

.meal_popupElement {
  position: fixed;
  margin: auto;
  margin-top: 6%;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  border-radius: 15px;
  height: 80%;
  box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  z-index: 2;
  overflow: hidden;

  p,
  h2 {
    padding-left: 1rem;
    padding-right: 1rem;
    font-family: "Open Sans", sans-serif;
  }
  p {
    margin-top: 0;
  }
  h2 {
    margin-bottom: 0.5rem;
    font-size: larger;
  }
  svg {
    position: absolute;
    display: flex;
    margin: 6px;
    width: auto;
    height: 35px;
    color: white;
    right: 0;
  }
  img {
    width: 100%;
    height: 30%;
    object-fit: cover;
    object-position: 0% 0%;
  }
  transition: opacity .25s ease-in-out;
  opacity: 0;
}

.meal_popupElement.open {
  opacity: 1;
}**

javascript html css reactjs

Answer 1

Answer №1

To make your component render .meal_popup first and then add the .open class afterwards for the transition to work properly, you can wrap

setbox_transition(!box_transition)

in either a Window.requestAnimationFrame() or

WindowOrWorkerGlobalScope.setTimeout()

call. This ensures that mealOne_box and box_transition are updated separately and trigger two distinct requests.

Since setState is asynchronous, there may still be issues with this approach, as React could batch updates and perform DOM updates simultaneously.

A working solution with a high delay looks like this:

const mealOneClickHandler = (event) => {
  mealOne_boxSet(!mealOne_box);
  scrollSet(!scroll);
  setTimeout(() => {
    setbox_transition(!box_transition);
  }, 1000);      
};

Using requestAnimationFrame might also require multiple calls and could pose more problems than using setTimeout:

const mealOneClickHandler = (event) => {
  mealOne_boxSet(!mealOne_box);
  scrollSet(!scroll);

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      setbox_transition(!box_transition);
    });
  });      
};

Therefore, the optimal solution would be to utilize ReactCSSTransitionGroup. You can refer to this example, which provides a clearer explanation compared to the official documentation.

Answer 2

To make your component render .meal_popup first and then add the .open class afterwards for the transition to work properly, you can wrap

setbox_transition(!box_transition)

in either a Window.requestAnimationFrame() or

WindowOrWorkerGlobalScope.setTimeout()

call. This ensures that mealOne_box and box_transition are updated separately and trigger two distinct requests.

Since setState is asynchronous, there may still be issues with this approach, as React could batch updates and perform DOM updates simultaneously.

A working solution with a high delay looks like this:

const mealOneClickHandler = (event) => {
  mealOne_boxSet(!mealOne_box);
  scrollSet(!scroll);
  setTimeout(() => {
    setbox_transition(!box_transition);
  }, 1000);      
};

Using requestAnimationFrame might also require multiple calls and could pose more problems than using setTimeout:

const mealOneClickHandler = (event) => {
  mealOne_boxSet(!mealOne_box);
  scrollSet(!scroll);

  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      setbox_transition(!box_transition);
    });
  });      
};

Therefore, the optimal solution would be to utilize ReactCSSTransitionGroup. You can refer to this example, which provides a clearer explanation compared to the official documentation.

Answer 3

Answer №2

The fading in issue has been resolved, but the fade out problem remains unresolved:

 <div className= {mealOne_box ? 'meal_popup': 'meal_popup hidden'}>
                    <div className={box_transition ? 'meal_popupElement open' : 'meal_popupElement'}>
                        <CancelIcon onClick={mealOneClickHandler} />
                        <img alt='' src={PancakeImage} />
                        <div className='text_scroll'>
                            <h2>Ingredients:</h2>
                            <p>{Math.round((mealOneCals * 0.45) / 3.64)}g of flour, 1.5 teaspoons of baking powder, {Math.round((mealOneCals * 0.2) / 3.68)}g of cocoa powder, water, calorie free sweetener,  {Math.round((mealOneCals * 0.05) / 0.67)}g of mixed berries  and {Math.round(((mealOneCals * 0.3) / 1.55) / 44)} medium eggs.</p>
                            <p>High protein and low calorie dense option: use  {Math.round((mealOneCals * 0.55) / 3.64)}g of flour and {Math.round((mealOneCals * 0.2) / 0.45)}ml of egg white instead(this is less calorie dense so you get more food for the same amount of calories along with it being much higher in protein).</p>
                            <h2>Method:</h2>
                            <p>Combine the flour, egg, baking powder, cocoa together in a bowl to make a thick batter(add sweetener to taste). Then add as much water required to give the batter a pourable consistency. Pre heat a good non-stick pan on medium heat with no oil, once up to heat pour in your batter and flip once ready. Once all pancakes are made serve with fruit on-top.</p>
                        </div>
                    </div>
                    <div onClick={mealOneClickHandler} className='meal_popupBackground' />
                </div>

CSS Styles

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.meal_popup.hidden{
  visibility: hidden;
}

Answer 4

The fading in issue has been resolved, but the fade out problem remains unresolved:

 <div className= {mealOne_box ? 'meal_popup': 'meal_popup hidden'}>
                    <div className={box_transition ? 'meal_popupElement open' : 'meal_popupElement'}>
                        <CancelIcon onClick={mealOneClickHandler} />
                        <img alt='' src={PancakeImage} />
                        <div className='text_scroll'>
                            <h2>Ingredients:</h2>
                            <p>{Math.round((mealOneCals * 0.45) / 3.64)}g of flour, 1.5 teaspoons of baking powder, {Math.round((mealOneCals * 0.2) / 3.68)}g of cocoa powder, water, calorie free sweetener,  {Math.round((mealOneCals * 0.05) / 0.67)}g of mixed berries  and {Math.round(((mealOneCals * 0.3) / 1.55) / 44)} medium eggs.</p>
                            <p>High protein and low calorie dense option: use  {Math.round((mealOneCals * 0.55) / 3.64)}g of flour and {Math.round((mealOneCals * 0.2) / 0.45)}ml of egg white instead(this is less calorie dense so you get more food for the same amount of calories along with it being much higher in protein).</p>
                            <h2>Method:</h2>
                            <p>Combine the flour, egg, baking powder, cocoa together in a bowl to make a thick batter(add sweetener to taste). Then add as much water required to give the batter a pourable consistency. Pre heat a good non-stick pan on medium heat with no oil, once up to heat pour in your batter and flip once ready. Once all pancakes are made serve with fruit on-top.</p>
                        </div>
                    </div>
                    <div onClick={mealOneClickHandler} className='meal_popupBackground' />
                </div>

CSS Styles

.meal_popup {
  position: fixed;
  display: flex;
  align-items: center;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
}

.meal_popup.hidden{
  visibility: hidden;
}

What is the best way to incorporate a smooth transition for an object as it appears on the screen in React?

Answer №1

Answer №2

Similar questions

Utilizing arrays dynamically to generate data for a bar chart display in JavaScript

What is the best way to conceal a set of buttons on the main page using vue.js?

Deactivating a button if the input fields are blank using ReactJS

Prevent removal of h2 tag within a contenteditable segment

checkbox revision

How to use PHP and JavaScript to update a location marker on Google Maps

My current array is arr=[1,2,3,4]. I recently added an element to it using arr.push(5). Now I want to rearrange the array to be [5,4,3,2,1]. Any suggestions on how to achieve this

When attempting to create, an error occurs: Uncaught TypeError: Unable to access properties of undefined (retrieving 'id')

Guide on implementing a date selector for each button/option clicked using Vue.js

What are the best ways to create image animations on top of other images using CSS or JavaScript?

Unable to transmit an object using ExpressJS

Learn how to toggle the menu list visibility by clicking on a component in Vue

Setting state dynamically in Typescript with ReactJS

Choosing an option from a dropdown menu does not trigger the execution of an AngularJS function through Selenium

Is it possible for you to execute 2 procedures consecutively simply by clicking on a button?

Why is my array.sort statement in ReactJS not functioning properly?

The Angular Observable continues to show an array instead of a single string value

Use jQuery to display the first 5 rows of a table

Troubleshooting material design CSS problem in AngularJS routing module

Differences in line spacing can be observed between the INPUT and LABEL elements