Блог

Я пытаюсь создать Modal компонент. Я бы хотел, чтобы при появлении модального элемента он появлялся с переходом точно так же, как когда он исчезает. В настоящее время это очень сложно, почему и как я могу это исправить?

Я бы хотел, чтобы при отображении модала он отображался с анимацией и тем же поведением, когда модал исчезает (нажмите на button него).

большое вам спасибо за помощь, я знаю, что многому научусь.

 //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 amp;amp; (
      <Modal show={show}>
        <ModalContent show={closeModal} />
      </Modal>
    )}
  </div>
 );
}
 

Я обновил свой код:

это мой живой код

Прежде всего, в вашей демонстрации модальный исчезает сразу, без какого-либо перехода. Кажется, что это вызвано повторным рендерингом всего компонента приложения при show изменении состояния. Извлечение Modal компонента из приложения делает свое дело для меня:

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

export default function App() {
 

Второй момент — вы не можете управлять начальной настройкой только с помощью css transition. Переход появляется, когда что-то (класс, атрибут, псевдокласс) изменяется в данном элементе. Чтобы обойти это и иметь плавный модальный внешний вид, вы можете настроить одноразовый 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>
);
}