通常情况下，当元素从屏幕上消失时，我们可以使用exit属性来触发一个出场动画。然而，当使用AnimatePresence组件包装元素时，可能会出现一些问题。在这种情况下，需要在motion组件中使用onExitComplete函数来确保在动画完成后清除元素。以下是一个示例代码：

import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

const ExampleComponent = () => {
  const [showElement, setShowElement] = useState(true);

  const handleOnClick = () => setShowElement(!showElement);

  return (
    

      
        {showElement ? "Hide Element" : "Show Element"}
      

      
        {showElement && (
           setShowElement(false)}
          >
            
Element to be animated
          
        )}
      
    
  );
};

export default ExampleComponent;