Framer-motion does not apply exit condition correctly

Issue

Working example (which for some reason deos not work, some syntax error regarding import stack something happens):

import "./styles.css";
import {
  useState
} from "react";
import {
  motion,
  AnimatePresence
} from "framer-motion";

export default function App() {
  const [selectedCard, setSelectedCard] = useState(null);

  const cards = ["Card 1", "Card 2", "Card 3"]; // Replace with your actual data

  return ( <
    AnimatePresence >
    <
    div className = "cards" > {
      cards.map((card, index) => ( <
        motion.div className = "card"
        key = {
          index
        }
        onClick = {
          () => setSelectedCard(index)
        }
        animate = {
          selectedCard === index ? {
            opacity: 1
          } : {
            opacity: 0
          }
        }
        exit = {
          {
            display: "none"
          }
        }
        transition = {
          {
            duration: 0.5
          }
        } > {
          card
        } <
        /motion.div>
      ))
    } <
    /div> < /
    AnimatePresence >
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.cards {
  display: flexbox;
  align-content: flex-start;
  justify-content: center;
  outline: 5px solid #ff0000;
  /* Set the color you want for the outline */
  width: 7rem;
}

.card {
  font-size: 2rem;
  text-align: center;
  outline: 2px solid #5d00ff;
  /* Set the color you want for the outline */
  width: 5rem;
  padding: 1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

I would assume that after clicking on any card in the right side box, the rest of them would be rendered out of the dom, but it does not happen, they just stay hidden (opacity 0)

I did specify exit condition for motion as display: "none"

Sandbox

Solution

The main reason your exit animation isn't working is because the card isn't being removed from the React tree. I've made this example with something close to the effect you are going for.

Answered By - Rico