我目前正在創建模式的自定義實現。到目前為止，一切都工作得很好，但我似乎無法為其設置動畫，也無法理解它。這是我的模態組件 import React from 'react'import Slider from './Slider'import {IoIosCloseCircleOutline} from "react-icons/io"import styled from "styled-components";export default function Modal(props) {    const Modal = styled.div `    transform: translateX(${({animateSlideInRight}) => (animateSlideInRight ? "0" : "100vw")});    transition: transform 1s;    width: 1000px;    height: 650px;    z-index: 100;    position: fixed;    background: white;    transition: all 1.1s ease-out;    box-shadow:       -2rem 2rem 2rem rgba(black, 0.2);    visibility: visible;    display: flex;    border-bottom-right-radius: 100px;    `    const closeModal = () => {        props.setShow(false)    }    const data = props.data    if (!props.show) {        return null    }    return (        <div className="modalWrapper">              <Modal className="modal" id="modal" animateSlideInRight = {props.show}>                <div className="modalHeaderWrapper">                <IoIosCloseCircleOutline className="modalCloseCross" onClick={closeModal}/>                    <img src={data[0].logo} alt="logo" />                    <h2>{data[0].title}</h2>                </div>                <div className="modalRightFlex">                    <Slider                         images={[data[0].image1Carrousel, data[0].image2Carrousel, data[0].image3Carrousel]}                    />                </div>            </Modal>        </div>    )}正如你所看到的，我的模態是一個styledComponent定義是否根據顯示狀態在 X 中進行翻譯的 a 。在我的場景中，我必須提升狀態，因為我是通過單擊卡片來打開此模式的，該卡片本身是一個不同的組件，因此它們的祖先正在處理狀態。我當前的模態 CSS 如樣式化的 div 中所示。我嘗試過的事情1-嘗試使用常規 div 并通過帶有關鍵幀的 CSS 處理動畫 --> 它適用于滑入，但當我關閉時卻不會（在這種情況下，我的顯示狀態使用不同的模式為模態定義了一個類名）他們每個人的動畫）2-嘗試設置動畫狀態并className根據該狀態是真還是假來定義。當我關閉時它第一次工作（盡管必須在將 animate 設置為 false 和 show 設置為 false 之間引入動畫持續時間超時），但隨后它就會變得瘋狂并開始到處閃爍。無論如何，有人可以看到這個問題嗎？非常感謝