无法在 ReactJS 上为模态动画

Question

我目前正在创建模式的自定义实现。到目前为止，一切都工作得很好，但我似乎无法为其设置动画，也无法理解它。

这是我的模态组件

 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 之间引入动画持续时间超时），但随后它就会变得疯狂并开始到处闪烁。

无论如何，有人可以看到这个问题吗？非常感谢

Answer 1

您应该在渲染它的组件的外部范围中定义Modal，动画不会完成，并且您可以通过在下一个渲染时重新定义它来重置它。还应该重置动画none而不是给出实际长度。此外，可能有更多相关的 CSS 错误可以隐藏您的modal动画，例如z-index和position，如果您的问题集中在动画问题上，您应该消除它周围的所有噪音。请参阅工作示例：const Animation = styled.div`&nbsp; transform: ${({ animate }) => (animate ? "none" : "translateX(500px)")};&nbsp; transition: transform 1s;`;function Modal(props) {&nbsp; return <Animation animate={props.show}>hello</Animation>;}function Component() {&nbsp; const [show, toggle] = useReducer((p) => !p, false);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <Modal show={show} />&nbsp; &nbsp; &nbsp; <button onClick={toggle}>show</button>&nbsp; &nbsp; </>&nbsp; );}null另外，当您不想设置动画时，您不应该返回，否则您将丢失关闭动画。// remove this codeif (!props.show) {&nbsp; return null;}