Framer Motion Animate Pressence exit

Question

I'm encountering an issue with the exit animation of a confirmation modal in my React application. The modal is designed to appear when a user attempts to delete a row by clicking on a delete button associated with each row in a table. While the modal correctly appears upon deletion initiation, it abruptly disappears without displaying the intended exit animation.

To address this issue, I've ensured that the exit animation is properly defined within the <motion.dialog> component, which is wrapped by the AnimatePresence component. The exit object of <motion.dialog> specifies animation properties such as opacity and y values to smoothly animate the modal out of view, along with a defined duration to control the speed of the animation.

Additionally, I've confirmed that the AnimatePresence component adequately encapsulates the modal component, allowing React to track the presence of the modal and apply animations when it enters or exits the DOM. Furthermore, I've inspected the state variable open, which governs the modal's visibility, to ensure it updates correctly when the modal is closed, thus triggering the exit animation via AnimatePresence.

To isolate the issue, I temporarily simplified the exit animation by testing a basic transition, such as fading out (opacity: 0), without any vertical movement. This step aimed to identify any potential conflicts or overrides in CSS styling that might be interfering with the exit animation defined in Framer Motion.

In summary, I'm troubleshooting the exit animation of a confirmation modal in my React application, ensuring that all animation properties are correctly defined, the component hierarchy is appropriately structured, and there are no conflicting styles hindering the intended animation behavior.

const [showConfirmation, setShowConfirmation] = useState(null);
const handleDelete = (rowData) => {
    if (rowData.status === "deactivated") {
      return;
    }
    setShowConfirmation(rowData.request_id);
  };

  const handleConfirmDelete = () => {
    const requestId = showConfirmation;
    console.log("Deleting row:", requestId);
    deleteRowMutation.mutateAsync(requestId);
    setShowConfirmation(null);
    setOpen(false);
  };

  const handleCancelDelete = () => {
    setShowConfirmation(null);
    setOpen(false);
  };



columnHelper.display({
      id: "actions",
      header: <div style={{ textAlign: "center" }}>Action</div>,
      cell: (props) => (
        <div style={{ display: "flex", justifyContent: "center" }}>
          <button
            disabled={props.row.original.status === "deactivated"}
            onClick={() => handleDelete(props.row.original)}
            style={{
              width: "fit-content",
              color: "#FFFFFF",
              fontSize: "12px",
              lineHeight: "12px",
              fontWeight: 500,
              fontFamily: "Poppins, sans",
              backgroundColor:
                props.row.original.status === "deactivated"
                  ? "#FFD4C5"
                  : "#FF6F3F",
              borderRadius: "4px",
              padding: "8px",
              border: "none",
              cursor:
                props.row.original.status === "deactivated"
                  ? "default"
                  : "pointer",
            }}
          >
            {props.row.original.status === "deactivated" ? "Deleted" : "Delete"}
          </button>
          <AnimatePresence mode="await">
            {showConfirmation === props.row.original.request_id && (
              <ConfirmationModal
                key={props.row.original.request_id}
                data={props.row.original}
                onConfirm={handleConfirmDelete}
                onCancel={handleCancelDelete}
                open={open}
                // onOpenChange={setOpen}
              />
            )}
          </AnimatePresence>
        </div>
      ),
    }),








export const ConfirmationModal = ({ data, onConfirm, onCancel, open}) => {
  const handleCancelDelete = () => {
    onCancel();
  };
  const handleConfirmDelete = () => {
    onConfirm();
  };
  return (
    <>
      <div className={classes.backdrop} onClick={handleCancelDelete} />
      <motion.dialog
        className={classes.dialog}
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: -120 }}
        exit={{ opacity: 0, y: 30 }}
        transition={{ duration: 0.5 }}
        open={open}
      >
        <h5 className={classes.title}>Do you want to delete ?</h5>
        <div className={classes.form}>
          <div className={classes.form__controls}>
            <div className={classes.form__group}>
              <input
                type="text"
                id="lotId"
                className={classes.form__field}
                placeholder="Request Id"
                value={data.lot_id}
                disabled
              />
              <label htmlFor="lotId" className={classes.form__label}>
                Lot Id
              </label>
            </div>
            <div className={classes.form__group}>
              <input
                type="text"
                id="originalPrice"
                className={classes.form__field}
                placeholder="Original price"
                value={data.original_price}
                disabled
              />
              <label htmlFor="originalPrice" className={classes.form__label}>
                Original Price
              </label>
            </div>
            <div className={classes.form__group}>
              <input
                type="text"
                id="discountedPrice"
                className={classes.form__field}
                placeholder="Discounted Price"
                value={data.rate_card}
                disabled
              />
              <label htmlFor="discountedPrice" className={classes.form__label}>
                Discounted Price
              </label>
            </div>
          </div>
          <div className={classes.btns}>
            <button className={classes.form__btn} onClick={handleConfirmDelete}>
              Confirm
            </button>
            <button
              className={classes.form__btn__cancel}
              onClick={handleCancelDelete}
            >
              Cancel
            </button>
          </div>
        </div>
      </motion.dialog>
    </>
  );
};