無法在 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 ，它根據顯示 state 定義是否在 X 中翻譯。 在我的場景中，我不得不抬起 state，因為我通過單擊本身是不同組件的卡來打開此模式，因此它們的祖先正在處理狀態。

我當前用於模態的 CSS 如樣式 div 所示。

我嘗試過的事情

1-tried having a regular div and handle the animation through CSS with keyframes --> It works for sliding in but it doesn't when I close (in that instance I had my show state defining a class name for the modal with a different animation 每個）

2-嘗試設置動畫className並根據 state 是真還是假來定義類名。 它在我關閉時第一次起作用（盡管必須在將 animate 設置為 false 和 show 設置為 false 之間引入 animation 持續時間的超時），但隨后它變得瘋狂並開始到處閃爍。

無論如何有人可以看到這個問題？ 非常感謝

編輯Sanbox 鏈接： https://codesandbox.io/s/trusting-shape-vxujw

Answer 1

您應該在渲染它的組件的外部 scope 中定義Modal ，animation 沒有完成，您可以通過在下一次渲染時重新定義它來重置它。

此外，重置 animation 應該使用none而不是給出實際長度。

Moreover, there might be more CSS bugs related that can hide your modal animation like z-index and position , if your question is focused on an animation problem you should remove all the noise around it.

請參閱工作示例：

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 ，您將失去關閉的 animation。

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