当我点击X按钮时，动画不会在React和Styled组件中播放

Question

我想创建弹出与样式组件和添加动画淡入淡出。但问题是，当我通过点击X按钮关闭弹出窗口时，动画不会播放。下面是我的代码：

到{不透明度：1；}`；

const fadeOut=keyframes`来自{不透明：0；}

到{不透明度：1；}`；

*-webkit-scrollbar-thumb{background-color:#3aa4a4；border-radius:20px；border:3px实心透明；background-clip:content-box；}`

const PopupContent=styled.div高度：1000px；左衬垫：30px；填充-右：30px；；

const PopupHeader=styled.divdisplay：flex；；

类型PopupProps={showpopup:boolean；noroundkorners？：boolean；header:string；setshowpopup:dispatch ；children？：react.reactnode；}

导出const Popup=（{showPopup,noroundborners,children,header,setShowPopup}：PopupProps）=>{const PopupRef=useRef（）；

const closePopup=(E:react.SyntheticEvent)=>{if(Popupref.Current===e.target){setShowPopup（false）；}}；

返回(<>{showPopup？（{header} setShowPopup((prev:boolean)=>！prev)}/>{children}）：null})；}；

Answer 1

问题是一旦按下关闭按钮，组件就会被卸载。

  const closePopup = (e: React.SyntheticEvent) => {
 if (PopupRef.current === e.target) {
   setShowPopup(false);
 }   };

你cna放了一个超时来查看结束动画。

    const closePopup = (e: React.SyntheticEvent) => {
    if (PopupRef.current === e.target) {
        setTimeout(function() {
            setShowPopup(false);
        }, 300);
    }
};