无法在 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 className="modalRightDescription">
                        <h1>Description</h1>
                        <p>{data[0].description}</p>
                        <h1>Technologies</h1>
                        <div className="modalTechnologiesWrapper">
                            {data[0].technologiesUsed.map((image) => {
                                return <img src={image}/>
                            })}
                        </div>
                    </div>
                </div>
            </Modal>
        </div>
    )
}

如您所见，我的模态是styledComponent，它根据显示状态定义是否在 X 中翻译。在我的场景中，我必须提升状态，因为我通过单击本身是不同组件的卡片打开此模式，因此它们的祖先正在处理状态。

我当前的模态 CSS 如样式 div 所示。

我尝试过的事情

1-尝试使用常规 div 并通过带有关键帧的 CSS 处理动画 --> 它适用于滑入，但在我关闭时不起作用（在那种情况下，我让我的显示状态为模态定义了一个类名每个人都有不同的动画）

2-尝试设置动画状态并根据该状态是真还是假来定义className。它在我关闭时第一次工作（尽管必须在将 animate 设置为 false 和 show 设置为 false 之间引入动画持续时间的超时），但随后它变得疯狂并开始到处闪烁。

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

编辑 沙盒链接：https://codesandbox.io/s/trusting-shape-vxujw

Answer 1

您应该在渲染它的组件的外部范围内定义Modal，动画不会完成，您可以通过在下一次渲染时重新定义它来重置它。

还应使用none 重置动画，而不是提供实际长度。

此外，可能还有更多相关的 CSS 错误可以隐藏您的 modal 动画，例如 z-index 和 position，如果您的问题集中在动画问题上，您应该删除它周围的所有噪音。

查看工作示例：

const Animation = styled.div`
  transform: ${({ animate }) => (animate ? "none" : "translateX(500px)")};
  transition: transform 1s;
`;

function Modal(props) {
  return <Animation animate={props.show}>hello</Animation>;
}

function Component() {
  const [show, toggle] = useReducer((p) => !p, false);
  return (
    <>
      <Modal show={show} />
      <button onClick={toggle}>show</button>
    </>
  );
}

另外，当你不想动画时，你不应该返回null，你会失去关闭动画。

// remove this code
if (!props.show) {
  return null;
}