If I am conditionally rendering a ponent depending on some state, how can I animate its transition between its open and closed states in React with TailwindCSS?

{successMessage && (
              <div className="flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded">
                <p>Added to watchlist!</p>
                <button onClick={() => setSuccessMessage(false)}>X</button>
              </div>
            )}

This code half works but there is no animation or transition period to it. How can I fix this?

If I am conditionally rendering a ponent depending on some state, how can I animate its transition between its open and closed states in React with TailwindCSS?

{successMessage && (
              <div className="flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded">
                <p>Added to watchlist!</p>
                <button onClick={() => setSuccessMessage(false)}>X</button>
              </div>
            )}

This code half works but there is no animation or transition period to it. How can I fix this?

• javascript
• css
• reactjs
• next.js
• tailwind-css

• You can do as MB_ suggested in their answer or you can provide some actual fade animations or like. – brc-dd Commented Nov 8, 2021 at 13:38

3 Answers 3

Two states works great. With first one add/remove "hidden" class. And with second one change opacity/height/translate or what you need for animation.

Use useEffect and setTimeout with 0 delay for changing the state of secondState. like below:

useEffect(() => {
setTimeout(() => {
  setSecondState(firstState)
}, 0) }, [firstState])

<div className={`${firstState ? "hidden" : ""} ${secondState ? "opacity-100" : "opacity-0"}`} />

Try something like this :

  <div className={`flex transition-all ease-in-out duration-300 bg-gray-200 w-44 items-center justify-between px-2 rounded ${your_state ? 'opacity-100' : 'opacity-0'}`}>
   ...
  </div>

The "official" solution is to use Headless UI's Transition ponent.

Headless UI is created and maintained by the same authors of Tailwind CSS.