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

Adding flair to the selected element in the HTML nav bar

What is the best way to insert a React component or raw HTML into another React component?

Modifying Material-UI to Remove Shadows and Customize Components

Uninitialized process.env variables in Nextjs

The absence of dependencies in React's useEffect

Is it possible to transition an existing T3 Stack (TypeScript, Tailwind, trpc) application from a 'page router' setup to an 'app router' setup?

Attempting to create a cookie in getServerSideProps with next.js

Refresh PHP Calculator Display Once Results are Shown

Unique arrangement of hexagons in a honeycomb layout with precise centering

Modifying Row Color in Bootstrap 3: A Step-by-Step Guide

Having trouble incorporating a title in the header section

React Virtualized - Blank screen issue occurring because of continuous scrolling through a large list of ITSM items

Acquire the value of ant-design Select dropdown upon hover

What causes the width of unrelated cells to change when the contents of colspan'd cells expand in IE7?

Transferring information from ReactJs via the fetch API to a nodeJs server

Make sure to attach the zipped secure connect file when deploying your Next.js app on Amplify for added

Encountering a "Module Not Found" error when trying to add a background image using Tailwind

The issue with SetValue in mui Select and React hook form is causing problems

Encountered an error when attempting to load the external module @babel/register during the

Struggling to display nested data using ReactJS and Material-UI?