reactjs - 使用 css 属性 "transition: all"，我添加了一个动态类 : (<div className= {`${show ? "show": "hide"}></div> ), 但我的动画不起作用

Question

我正在尝试制作一个 Modal 组件。我希望当模态出现时，它会像消失时一样出现过渡。目前这非常不稳定，为什么以及如何解决它？

我希望当显示模态时，它会显示一个动画，当模态消失时(单击按钮)，它会显示相同的行为。

非常感谢您的帮助，我知道我会学到很多东西。

//content of styles.css
.modal {
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  transition: all 300ms ease-out;
  transform: translateY(100%);
}

.show {
  transform: translateY(0%);
}

.hide {
  transform: translateY(100%);
}

app.js

import Modal from "./modal";
/*
const Modal = ({ show, children }) => {
 return <div className={`modal ${show ? "show" : "hide"}`}>. 
 {children} </div>;
};
export default Modal;
*/
import ModalContent from "./modalContent";
/*
  const ModalContent = ({ show }) => {
   const showModal = () => {
    show();
   };
  return <button onClick={showModal}> close modal</button>;
};
export default ModalContent;
*/
export default function App() {
 const [show, setShow] = useState(false);
 const closeModal = () => {
  setShow(false);
};

useEffect(() => setShow(true), []);

return (
  <div className="App">
    {show && (
      <Modal show={show}>
        <ModalContent show={closeModal} />
      </Modal>
    )}
  </div>
 );
}

我更新了我的代码:

this is my live code

Answer 1

首先，在您的演示模式中立即消失，没有任何过渡。看来，这是由于在 show 状态更改时重新呈现整个 App 组件造成的。从 App 中提取 Modal 组件对我有用:

const Modal = ({ show, children }) => {
  useEffect(() => {}, [show]);
  return <div className={`modal ${show ? "show" : "hide"}`}>{children} </div>;
};

export default function App() {

第二点 - 您无法仅通过 css 转换来控制初始设置。当给定元素上的某些内容(类、属性、伪类)发生变化时，会出现过渡。为了解决这个问题并获得平滑的模态外观，您可以在 App 组件中设置一次性 useEffect，这会将 show 状态从 false 更改为 true。我的整体片段:

const Modal = ({ show, children }) => {
    return <div className={`modal ${show ? "show" : "hide"}`}>{children}        </div>;
};

export default function App() {

const ModalContent = ({ show }) => {
  const showModal = () => {
    show();
  };
  return <button onClick={showModal}> close modal</button>;
};

const [show, setShow] = useState(false);
const closeModal = () => {
  setShow(false);
};

useEffect(() => setShow(true), [])

return (
  <div className="App">
    <Modal show={show}>
      <ModalContent show={closeModal} />
    </Modal>
  </div>
);
}