when I click on X button animation is not played in React and Styled components

Question

I wanted to create Popup with styled components and added animation for fade in and fade out. But the problem is that when I close popup by clicking on X button the animation is not played. Here is my code:

import React, { useRef, Dispatch, SetStateAction } from 'react'; import styled, {keyframes} from 'styled-components'; import { MdClose as PopupClose } from 'react-icons/md';

const fadeIn = keyframes` from { opacity: 0; }

to { opacity: 1; } `;

const fadeOut = keyframes` from { opacity: 0; }

to { opacity: 1; } `;

const Background = 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}>`
height: 650px; overflow-y: auto;

::-webkit-scrollbar { width: 10px; }

::-webkit-scrollbar-track { margin-bottom: ${({noRoundCorners})=> noRoundCorners ? '1px' : '35px'}; background-color: transparent; }

::-webkit-scrollbar-thumb { background-color: #3AA4A4; border-radius: 20px; border: 3px solid transparent; background-clip: content-box; } `

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;;

type PopupProps = { showPopup: boolean; noRoundCorners?: boolean; header: string; setShowPopup: Dispatch<SetStateAction>; children?: 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(false); } };

return ( <> {showPopup ? ( {header} <ClosePopupButton aria-label='Close Popup' onClick={() => setShowPopup((prev:boolean) => !prev)} /> {children} ) : null} </> ); };

E P E P · Accepted Answer · 2021-07-25T11:55:43

The problem is that you component is get unmounted as soon as you press the close button.

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

You cna put a timeout to see the closing animation.

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

when I click on X button animation is not played in React and Styled components

1 Answers