What is causing my CSS transition to break when I remove the 0ms sleep delay?

Question

What is causing my CSS transition to break when I remove the 0ms sleep delay?

Recently, I decided to test my understanding of the FLIP animation technique by trying to implement it in a simple codepen experiment.

In the codepen (apologies for the messy code, I was just experimenting), I noticed an interesting behavior. When I removed the sleep function call that lasted for 0 milliseconds, the smooth transition stopped working and the div abruptly changed its position. This puzzled me as the sleep was set for such a short duration.

import React, { useRef, useState } from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

let first = {}
let second =  {}

const sleep = async (ms) => new Promise((resolve) => setTimeout(resolve, ms));

const App = () => {
  const [start, setStart] = useState(true);
  
  const boxRefCb = async el => {
    if (!el) return;

    el.style.transition = "";
    const x = parseInt(el?.getBoundingClientRect().x, 10);
    const y = parseInt(el?.getBoundingClientRect().y, 10);
    first = { x: second.x, y: second.y };
    second = { x, y };
    
    const dx = first.x - second.x;
    const dy = first.y - second.y;

    const transStr = `translate(${dx}px, ${dy}px)`;
    el.style.transform = transStr;
    await sleep(0); // comment me out
    el.style.transition = "transform .5s";
    el.style.transform = "";
  }
  
  return (
    <>
    <div style={{ display: "flex", gap: "1rem", padding: "3rem"}}>
      <div ref={ start ? boxRefCb : null } style={{ visibility: start ? "" : "hidden", width: 100, height: 100, border: "solid 1px grey" }}></div>
      <div  ref={ !start ? boxRefCb : null } style={{ visibility: !start ? "" : "hidden", width: 100, height: 100, border: "solid 1px grey" }}></div>
    </div>
      
    <button style={{ marginLeft: "3rem"}} onClick={() => setStart(start => !start)}>start | {start.toString()}</button>
    </>
  );
}

ReactDOM.render(<App />,
document.getElementById("root"))

I have a feeling that there might be some event loop intricacies at play here which I am not fully grasping. Can someone provide insights on this phenomenon?

html css reactjs transition

Answer 1

Answer №1

When the browser has time to recalculate the CSSOM boxes, also known as "performing a reflow," during a sleep, the transform rule may not be applied. This is because browsers typically wait until the changes are absolutely necessary before updating the entire page box model, as it can be quite resource-intensive.
For example, if you set the color of an element to red, then yellow, and finally green within a short period of time:

element.style.color = "red";
element.style.color = "yellow";
element.style.color = "green";

The CSSOM will only register the final state, which in this case is "green." The previous two changes are essentially ignored.

In your code, if you do not allow the event loop to actually loop, the value of transStr may never be recognized either.

Using a 0ms setTimeout is not a reliable solution, as there is no guarantee that the styles will be recalculated at that exact moment. It's better to manually force a recalculation using certain DOM methods/properties synchronously when needed. However, keep in mind that reflows can be costly operations, so use them sparingly and consolidate multiple instances where they are required to minimize performance impact.

Here is an example code snippet demonstrating how to handle this situation:

[Code snippet example]

To see the code in action, you can check out the demo here.

Answer 2

When the browser has time to recalculate the CSSOM boxes, also known as "performing a reflow," during a sleep, the transform rule may not be applied. This is because browsers typically wait until the changes are absolutely necessary before updating the entire page box model, as it can be quite resource-intensive.
For example, if you set the color of an element to red, then yellow, and finally green within a short period of time:

element.style.color = "red";
element.style.color = "yellow";
element.style.color = "green";

The CSSOM will only register the final state, which in this case is "green." The previous two changes are essentially ignored.

In your code, if you do not allow the event loop to actually loop, the value of transStr may never be recognized either.

Using a 0ms setTimeout is not a reliable solution, as there is no guarantee that the styles will be recalculated at that exact moment. It's better to manually force a recalculation using certain DOM methods/properties synchronously when needed. However, keep in mind that reflows can be costly operations, so use them sparingly and consolidate multiple instances where they are required to minimize performance impact.

Here is an example code snippet demonstrating how to handle this situation:

[Code snippet example]

To see the code in action, you can check out the demo here.

Answer 3

Answer №2

Your approach to this issue is currently using vanilla JavaScript, but React utilizes a virtual DOM and requires that DOM elements are re-rendered when the state changes. It would be beneficial to utilize React's state to update the XY position of the element within the virtual DOM while still incorporating CSS.

View the live demonstration here or access the code directly here:

https://codesandbox.io/s/react-dom-animations-s14n10?fontsize=14&hidenavigation=1&theme=dark

import { useState, useRef, useLayoutEffect } from "react";
import "./styles.css";

type BoxXYPosition = { x: number; y: number };

export default function App() {
  const startBox = useRef<HTMLDivElement | null>(null);
  const startBoxPosition = useRef<BoxXYPosition>({ x: 0, y: 0 });

  const endBox = useRef<HTMLDivElement | null>(null);

  const [boxPosition, setBoxPosition] = useState<BoxXYPosition>({
    x: 0,
    y: 0
  });
  const { x, y } = boxPosition;
  const hasMoved = Boolean(x || y);

  const updatePosition = () => {
    if (!endBox.current) return;

    const { x: endX, y: endY } = endBox.current.getBoundingClientRect();
    const { x: startX, y: startY } = startBoxPosition.current;

    // "LAST" - calculate end position
    const moveXPosition = endX - startX;
    const moveYPosition = endY - startY;

    // "INVERT" - recalculate position based upon current x,y coords
    setBoxPosition((prevState) => ({
      x: prevState.x !== moveXPosition ? moveXPosition : 0,
      y: prevState.y !== moveYPosition ? moveYPosition : 0
    }));
  };

  useLayoutEffect(() => {
    // "FIRST" - save starting position
    if (startBox.current) {
      const { x, y } = startBox.current.getBoundingClientRect();
      startBoxPosition.current = { x, y };
    }
  }, []);

  // "PLAY" - switch between start and end animation via the x,y state and a style property
  return (
    <main className="app">
      <h1>Transition Between Points</h1>
      <div className="container">
        <div
          ref={startBox}
          className="box start-point"
          style={{
            transform: hasMoved
              ? `translate(${x}px, ${y}px) rotateZ(360deg)`
              : ""
          }}
        >
          {hasMoved ? "End" : "Start"}
        </div>
        <div className="end-container">
          <div ref={endBox} className="box end-point" />
        </div>
      </div>
      <button
        type="button"
        onClick={updatePosition}
      >
        Move to {hasMoved ? "Start" : "End"}
      </button>
    </main>
  );
}

Answer 4

Your approach to this issue is currently using vanilla JavaScript, but React utilizes a virtual DOM and requires that DOM elements are re-rendered when the state changes. It would be beneficial to utilize React's state to update the XY position of the element within the virtual DOM while still incorporating CSS.

View the live demonstration here or access the code directly here:

https://codesandbox.io/s/react-dom-animations-s14n10?fontsize=14&hidenavigation=1&theme=dark

import { useState, useRef, useLayoutEffect } from "react";
import "./styles.css";

type BoxXYPosition = { x: number; y: number };

export default function App() {
  const startBox = useRef<HTMLDivElement | null>(null);
  const startBoxPosition = useRef<BoxXYPosition>({ x: 0, y: 0 });

  const endBox = useRef<HTMLDivElement | null>(null);

  const [boxPosition, setBoxPosition] = useState<BoxXYPosition>({
    x: 0,
    y: 0
  });
  const { x, y } = boxPosition;
  const hasMoved = Boolean(x || y);

  const updatePosition = () => {
    if (!endBox.current) return;

    const { x: endX, y: endY } = endBox.current.getBoundingClientRect();
    const { x: startX, y: startY } = startBoxPosition.current;

    // "LAST" - calculate end position
    const moveXPosition = endX - startX;
    const moveYPosition = endY - startY;

    // "INVERT" - recalculate position based upon current x,y coords
    setBoxPosition((prevState) => ({
      x: prevState.x !== moveXPosition ? moveXPosition : 0,
      y: prevState.y !== moveYPosition ? moveYPosition : 0
    }));
  };

  useLayoutEffect(() => {
    // "FIRST" - save starting position
    if (startBox.current) {
      const { x, y } = startBox.current.getBoundingClientRect();
      startBoxPosition.current = { x, y };
    }
  }, []);

  // "PLAY" - switch between start and end animation via the x,y state and a style property
  return (
    <main className="app">
      <h1>Transition Between Points</h1>
      <div className="container">
        <div
          ref={startBox}
          className="box start-point"
          style={{
            transform: hasMoved
              ? `translate(${x}px, ${y}px) rotateZ(360deg)`
              : ""
          }}
        >
          {hasMoved ? "End" : "Start"}
        </div>
        <div className="end-container">
          <div ref={endBox} className="box end-point" />
        </div>
      </div>
      <button
        type="button"
        onClick={updatePosition}
      >
        Move to {hasMoved ? "Start" : "End"}
      </button>
    </main>
  );
}

What is causing my CSS transition to break when I remove the 0ms sleep delay?

Answer №1

Answer №2

Similar questions

To navigate to an id or name in HTML, you must click on the anchor element twice

Error 403 CSRF forbidden encountered while utilizing the request.post.get() function within the views.py file linked to the HTML page

Using jQuery to assign each name the value of the group of radio buttons

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Show the entered user data in a separate Div when the button is clicked

Error: When executing the npm run build command, I encountered a TypeError stating that Ajv is not a

Creating a personalized MUI color scheme that seamlessly flows throughout your entire app

Reactive JS memory leakage occurring from recurring calculations utilizing setInterval

Selecting the next element in the DOM using Javascript

Clicking outside the navigation container will not cause it to disappear completely

The dialog box in CSS is extending too far down past the bottom of the screen, making it impossible to scroll and click on the buttons located

Creating a Confirmation Page following Stripe Checkout

Display the menu on the left side for mobile devices

Adjusting the positioning of links with bootstrap scrollyspy

Tips for ensuring the CSRF token functions properly on the browser when utilizing Django and React

I'm struggling to comprehend why this code isn't functioning as expected

Is it possible to retrieve information from a json file?

Building a drop-down menu with descriptions in React is a simple process that involves using

Should I use CSS, Bootstrap, or a combination of both for a complicated design in a React app

Problem with padding in Firefox when using jQuery's css() methodInconsistent behavior with padding property in