当我点击 X 按钮时，React 和 Styled 组件中没有播放动画答案

【问题标题】：when I click on X button animation is not played in React and Styled components当我点击 X 按钮时，React 和 Styled 组件中没有播放动画
【发布时间】：2021-10-01 16:45:59
【问题描述】：

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

import React, { useRef, Dispatch, SetStateAction } from 'react'; 从'styled-components'导入样式，{keyframes}；导入 { MdClose 作为'react-icons/md'中的 PopupClose };

const fadeIn = keyframes` from { 不透明度：0； }

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

const fadeOut = keyframes` from { 不透明度：0； }

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

const Background = styled.div 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 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`
高度：650px；溢出-y：自动；

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

::-webkit-scrollbar-track { 边距底部： ${({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 Header = styled.pfont-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 = { showPopup：布尔值； noRoundCorners?：布尔值；标头：字符串； setShowPopup: Dispatch; 孩子？：React.ReactNode； }

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

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

返回 ( {显示弹出？ ( {标题} setShowPopup((prev:boolean) => !prev)} /> {孩子们} ）：空值} > ); };

【问题讨论】：

标签： reactjs styled-components

【解决方案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);
    }
};

【讨论】：