tailwindcss - how to animate appearing div

Question

I want a div to appear and disappear with an animation.

I found this question but the answer does not work for me.

Here is (not) working example.

import * as React from "react";
import "./styles.css";

export default function App() {
  const [show, setShow] = React.useState(false);
  return (
    <div className="bg-gray-500">
      <button onClick={() => setShow(!show)}>toggle display</button>
      {show && (
        <div className="absolute inset-x-0 top-0 origin-top-right transform p-2 transition duration-1000 ease-out">
          this should animate but it doesn't
        </div>
      )}
    </div>
  );
}

Any ideas?

Answer 1

In addition to customizing your TailwindCSS theme to include custom transitions, you can also add custom animations. Below is working snippet that adds a custom "slideIn" animation.

To add your own custom animation, extend the theme with the animation keyframes and set the animation properties. Optionally, you can use a CSS custom property (e.g., var(--delay, 0)) for the animation delay so that you can set the delay value individually for each item in your list.

The classname for the custom animation is the animation name in your theme, prefixed with animate-.

I created a staggered effect by increasing the delay slightly using the custom property for each item (e.g., style={{ "--delay": i * 0.25 + "s" }}).

function WishList({ list }) {
  const [show, setShow] = React.useState(false);
  const handleClick = () => setShow((prevState) => !prevState);

  return (
    <React.Fragment>
      <div className="flex align-items-center justify-between">
        <h2 className="my-3 text-3xl font-bold tracking-tight text-gray-900">
          WishList
        </h2>
        <button
          onClick={handleClick}
          className="my-3 rounded-md bg-indigo-600 py-2 px-3 text-sm font-semibold text-white hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
        >
          Toggle List
        </button>
      </div>
      {show && (
        <ul>
          {list.map((item, i) => (
            <li
              key={i}
              className="animate-slideIn opacity-0 text-xl my-2"
              style={{ "--delay": i * 0.25 + "s" }}
            >
              {item}
            </li>
          ))}
        </ul>
      )}
    </React.Fragment>
  );
}

function App(){
  return (
    <main className="container mx-auto p-4">
      <WishList list={[
        "Wish List Item 1",
        "Wish List Item 2",
        "Wish List Item 3",
        "Wish List Item 4",
        "Wish List Item 5"
      ]} 
    />
    </main>
  )
}

const rootElement = document.getElementById("root");
const root = ReactDOM.createRoot(rootElement);
root.render(<App />);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<script>
  tailwind.config = {
    theme: {
      extend: {
        keyframes: {
          slideIn: {
            "0%": { opacity: 0, transform: "translateX(100%)" },
            "100%": { opacity: 1, transform: "translateX(0)" }
          }
        },
        animation: {
          slideIn: "slideIn .25s ease-in-out forwards var(--delay, 0)"
        }
      }
    }
  };
</script>
<div id="root"></div>