useTransition мгновенно монтирует новый объект

Question

Я пытаюсь понять, как использовать useTransition для переходов между страницами (простое изменение непрозрачности, при котором первая страница исчезает, а новая появляется). *https://codesandbox.io/s/sleepy-knuth-xe8e0?file= / src / App. js немного работает, но странно. Когда начинается переход, новая страница монтируется мгновенно, а старая начинает анимироваться. Это вызывает различные проблемы с макетом, а мне не нужно. Возможно ли, чтобы первый элемент исчезал и только затем монтировался и плавно исчезал во втором элементе?

Код, связанный с демонстрацией

import React, { useState } from "react";
import "./styles.css";
import { useTransition, a } from "react-spring";

export default function App() {
  const [initial, setInitial] = useState(true);
  const transition = useTransition(initial, {
    from: { opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {transition((style, initial) => {
        return initial ? (
          <a.h1 style={style}>Hello Initial</a.h1>
        ) : (
          <a.h1 style={style}>Hello Secondary</a.h1>
        );
      })}
      <button onClick={() => setInitial(prev => !prev)}>Change Page</button>
    </div>
  );
}

Answer 1

вы можете отложить начало перехода, дождавшись завершения анимации выхода.

const sleep = t => new Promise(res => setTimeout(res, t));

...

const transition = useTransition(initial, {
  from: { position: "absolute", opacity: 0 },
  enter: i => async next => {
    await sleep(1000);
    await next({ opacity: 1 });
  },
  leave: { opacity: 0 }
});

Это задерживает анимацию также при самом первом запуске. У вас может быть ссылка для отслеживания того, был ли компонент отрисован ранее или это его первый рендеринг, тогда вы можете пропустить вызов sleep, если это первый рендер.

OR

Вы можете просто указать trail config

const transition = useTransition(initial, {
    from: { position: "absolute", opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    trail: 300
  });

Answer 2

Вам нужно добавить position: absolute, а затем вам нужно установить правильную позицию с помощью css.

import React, { useState } from "react";
import "./styles.css";
import { useTransition, a } from "react-spring";

export default function App() {
  const [initial, setInitial] = useState(true);
  const transition = useTransition(initial, {
    from: { position: 'absolute', opacity: 0 },
    enter: { opacity: 1 },
    leave: { opacity: 0 }
  });

  return (
    <div>
      {transition((style, initial) => {
        return initial ? (
          <a.h1 style={style}>Hello Initial</a.h1>
        ) : (
          <a.h1 style={style}>Hello Secondary</a.h1>
        );
      })}
      <button onClick={() => setInitial(prev => !prev)}>Change Page</button>
    </div>
  );
}