In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

Question

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component.

To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sandbox/muddy-pine-hx86sf. Essentially, I am trying to achieve this transition when clicking on a list item.

However, in both the Sandbox and my local Next.js development environment, the transition is being skipped and the new background color is applied immediately without playing out the transition.

I'm uncertain if I'm misunderstanding how CSS transitions work or if this issue is related to Next.js or my lack of understanding in dynamically applying CSS to elements.

I attempted manually applying the class that changes the background position active-location-item using Firefox DevTools, which made the transition work.
I tried different CSS selectors but still faced the same issue of no transition occurring.
I confirmed in DevTools that the class is indeed applied when the item is clicked.

Any assistance on this matter would be greatly appreciated!

css reactjs next.js tailwind-css

Answer 1

Answer №1

The issue arises from the fact that a new component is being returned within the Modal. With each state change, the const LocationView gets initialized again. This leads to React treating LocationView as a fresh component since it's not the same reference on re-rendering, causing it to be remounted and resulting in no transitions.

To resolve this, you should directly return the JSX:

const { useState } = React;

const Modal = () => {
  const [activeLocation, setActiveLocation] = useState("");

  const handleLocationClick = () => {
    setActiveLocation("Example");
  };

  return (
    <div className="flex flex-col w-[600px]">
      <div className="flex flex-col text-hsr-dark font-medium grow">
        <ul className="list-disc list-inside">
          <li
            onClick={handleLocationClick}
            className={`${
              activeLocation === "Example" ? "active-location-item" : ""
            } location-item cursor-pointer text-2xl p-10 outline outline-2 outline-transparent  mb-1`}
          >
            Example
          </li>
        </ul>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<Modal/>);

tailwind.config = {
  theme: {
    extend: {
      colors: {
        "hsr-dark": "#404040",
        "hsr-grey": "#BFBFBF",
      },
    },
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div id="app"></div>

<style type="text/tailwindcss">
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

.location-item {
  background-image: linear-gradient(
    to right,
    theme("colors.hsr-dark") 50%,
    theme("colors.hsr-grey") 50%
  );
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.75s;
}

.active-location-item {
  background-position: left bottom;
}
</style>

Answer 2

The issue arises from the fact that a new component is being returned within the Modal. With each state change, the const LocationView gets initialized again. This leads to React treating LocationView as a fresh component since it's not the same reference on re-rendering, causing it to be remounted and resulting in no transitions.

To resolve this, you should directly return the JSX:

const { useState } = React;

const Modal = () => {
  const [activeLocation, setActiveLocation] = useState("");

  const handleLocationClick = () => {
    setActiveLocation("Example");
  };

  return (
    <div className="flex flex-col w-[600px]">
      <div className="flex flex-col text-hsr-dark font-medium grow">
        <ul className="list-disc list-inside">
          <li
            onClick={handleLocationClick}
            className={`${
              activeLocation === "Example" ? "active-location-item" : ""
            } location-item cursor-pointer text-2xl p-10 outline outline-2 outline-transparent  mb-1`}
          >
            Example
          </li>
        </ul>
      </div>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('app')).render(<Modal/>);

tailwind.config = {
  theme: {
    extend: {
      colors: {
        "hsr-dark": "#404040",
        "hsr-grey": "#BFBFBF",
      },
    },
  },
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.3.2"></script>

<div id="app"></div>

<style type="text/tailwindcss">
:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

.location-item {
  background-image: linear-gradient(
    to right,
    theme("colors.hsr-dark") 50%,
    theme("colors.hsr-grey") 50%
  );
  background-size: 200% 100%;
  background-position: right bottom;
  transition: all 0.75s;
}

.active-location-item {
  background-position: left bottom;
}
</style>

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

Answer №1

Similar questions

Module 'has-flag' not located

Alert displayed on console during transition from MaterialUI lab

Is it possible to copy text from an iframe to the clipboard?

"Varying hues on various displays: Exploring RGB values and CSS for video color

Ways to resolve the error "Uncaught TypeError: data.map is not a function"

Parsing a string into a React component: A step-by-step guide

Is there a way to retrieve the API response from Antd's upload action once the upload has been completed?

Creating a multiline centered navigation bar item using Bootstrap 4

Asynchronous data fetching adding two entries to an array

A single image with dual clickable areas managed by an interactive image map

When using HLS with Media Source Extensions on mobile devices, the <video> element with the muted and autoplay attributes may freeze on the first frame

Tips for making inline elements match the line height

Resizing a floated div causes the image to break out

Any suggestions on troubleshooting the error when trying to create a React app?

Subclass declaration with an assignment - React.Component

What steps can I take to prevent the odd gaps from appearing in my horizontal flexbox gallery?

Tapping the image will redirect you to the corresponding component

Troubleshooting Problems with Fancybox Scaling on Small Landscape-Oriented Mobile Devices

Invisible style date input value on iPhone mobile devices

`Incompatibility issue between HTML, CSS and Chrome browser`