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

Question

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

从 'react' 导入 React, { useRef, Dispatch, SetStateAction }; 从“样式组件”导入样式，{关键帧}；导入 { MdClose 作为 PopupClose } 来自 'react-icons/md';

const fadeIn = 关键帧` from { 不透明度：0； }

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

const fadeOut = 关键帧` from { 不透明度：0； }

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

常量背景= styled.div<{ref: any, showPopup: boolean}>

  top: 0;   bottom: 0;   left: 0;   right: 0;   background: rgba(0, 0, 0, 0.4);   position: fixed;   display: flex;   justify-content: center;   align-items: center;   transition: all .3s;   animation:${props => props.showPopup ? fadeIn : fadeOut} .3s;

;

const PopupWrapper = styled.div<{noRoundCorners?: boolean}>

  width: 600px;   background: #fff;   position: relative;   z-index: 10;   border: 1px solid #DCDCDC;   box-sizing: border-box;   box-shadow: 0px 4px 16px rgba(67, 67, 67, 0.1);   border-radius:${({noRoundCorners})=> noRoundCorners ? '1px' : '40px'};   transition: all .2s;

;

const PopupContentWrapper = styled.div<{noRoundCorners?: boolean}>`
高度：650 像素；溢出-y：自动；

::-webkit-滚动条 { 宽度：10px； }

::-webkit-滚动条-轨道 { 边距底部： ${({noRoundCorners})=> noRoundCorners ？ '1px' : '35px'}; 背景颜色：透明； }

::-webkit-scrollbar-thumb { 背景颜色：#3AA4A4； 边框半径：20px； 边框：3px实心透明； 背景剪辑：内容框； } `

const PopupContent = styled.div

  height: 1000px;   padding-left: 30px;   padding-right: 30px;

;

const PopupHeader = styled.div

  display: flex;

;

const 标头 = styled.p

font-family: Open Sans; font-style: normal; font-weight: bold; font-size: 24px; line-height: 24px; margin-left: 30px;

;

const ClosePopupButton = styled(PopupClose)

  cursor: pointer;   position: absolute;   top: 20px;   right: 20px;   width: 32px;   height: 32px;   padding: 0;   z-index: 10;   transition: all .2s;

;

类型 PopupProps = { 显示弹出窗口：布尔值； noRoundCorners？：布尔值； 标头：字符串； setShowPopup：调度； 孩子？：React.ReactNode； }

export const Popup = ({ showPopup, noRoundCorners, 子项, header, setShowPopup }: PopupProps) => { const PopupRef = useRef();

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

返回（ <> {显示弹出？ （ {标题} setShowPopup((prev:boolean) => !prev)} /> {孩子们} ） ： 无效的} ）； };

Answer 1

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

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

您可以设置超时时间来观看关闭动画。

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