无法在 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`

  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;

}