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

Posted 2023-02-19

【中文标题】当我点击 X 按钮时，React 和 Styled 组件中没有播放动画

【英文标题】：when I click on X button animation is not played in React and Styled components

【发布时间】：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) /> 孩子们 ） ： 空值 > ); ;

【参考方案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);
    
;