Javascript Can'；在ReactJS上设置模态动画

我目前正在创建模式的自定义实现。到目前为止，一切都很好，但我似乎无法对其进行动画制作，也无法集中注意力

这是我的模态组件

 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>
    )
}

从“React”导入React
从“./Slider”导入滑块
从“反应图标/io”导入{IOOSCloseCircleOutline}
从“样式化组件”导入样式化；
导出默认功能模式（道具）{
const Modal=styled.div`
变换：translateX（${（{animateSlideInRight}）=>（animateSlideInRight？“0”：“100vw”）}）；
转变：转变1s；
宽度：1000px；
高度：650px；
z指数：100；
位置：固定；
背景：白色；
过渡：所有的1.1都会放松；
框阴影：
-2rem 2rem 2rem rgba（黑色，0.2）；
能见度：可见；
显示器：flex；
边框右下半径：100px；
`
const closeModal=（）=>{
道具设置说明（错误）
}
const data=props.data
如果（！props.show）{
返回空
}
返回(
{数据[0]。标题}
描述
{数据[0]。说明}

技术
{data[0]。使用的技术。映射（（图像）=>{
返回
})}
)
}

正如您所看到的，我的模式是一个

styledComponent

，它根据显示状态定义是否在X中进行翻译。在我的场景中，我必须提升状态，因为我要打开这个模式，点击一张卡，这张卡本身就是一个不同的组件，所以它们的祖先负责状态

我当前的模式CSS如styled div中所示

我尝试过的事情

1-尝试使用常规div并通过CSS处理动画，其中包含关键帧-->它可用于滑入，但在我关闭时不起作用（在这种情况下，我让我的show state为模式定义了一个类名，每个模式都有不同的动画）

2-尝试设置动画状态，并根据该状态是真还是假定义

类名

。它在我第一次关闭时起作用（尽管在将animate设置为false和show设置为false之间必须引入动画持续时间的超时），但随后它会变得疯狂并开始到处闪烁

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

编辑

---

Sanbox链接：

您应该在渲染它的组件的外部范围中定义

模态

，动画没有完成，您可以通过在下一次渲染时重新定义来重置它

还应使用

none

重置动画，而不是给出实际长度

此外，可能会有更多与CSS相关的bug隐藏

模态

动画，如

z-index

和

位置

，如果您的问题集中在动画问题上，您应该消除周围的所有噪音

见工作示例：

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>
    </>
  );
}

---

下次请提供一个可复制的示例，特别是CSS问题，应该有一个可使用的实例。我认为您忘记了为样式化组件添加

transition

属性。目前，您提供的沙盒中没有动画（元素的位置直接更改，没有任何转换）。添加了转换效果，谢谢。如果它不起作用，我现在将尝试实现它。我将创建一个sandbox@DennisVash我已经实施了您的解决方案（或者我认为我已经实施了，但仍然不起作用）问题中包含沙盒链接作为编辑再次，在询问特定主题时删除不必要的噪音，当

show

为

false

时返回

null

，这不会导致动画，因为您没有渲染任何内容。看见

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