如何实现两个组件之间的简单过渡答案

【问题标题】：How to implement a simple transition between two components如何实现两个组件之间的简单过渡
【发布时间】：2022-03-04 01:41:54
【问题描述】：

我想使用react-string 实现两个组件之间的简单转换。我目前的尝试是https://codesandbox.io/s/react-spring-simple-transition-16qhf?file=/src/App.tsx：

import React, { useState } from 'react'
import { useTransition, animated } from '@react-spring/web'

export default function App() {
  const [page, setPage] = useState(1)

  const transitions = useTransition(page, {
    key: page,
    initial: { opacity: 1 },
    from: { opacity: 0, position: 'absolute' as const },
    enter: { opacity: 1, position: 'relative' as const },
    leave: { opacity: 0, position: 'absolute' as const },
    config: { duration: 1000 },
  })

  return (
    <div>
      <h1>Page Title</h1>

      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione incidunt atque est sunt deleniti esse adipisci
        quibusdam et enim alias accusantium, itaque beatae voluptates, ex illo harum repudiandae veniam inventore.
      </p>

      <div style={{ position: 'relative' }}>
        {transitions((styles, item) => {
          return item === 1 ? (
            <animated.div style={styles}>
              <h1>This is page 1</h1>
              <button type="button" onClick={() => setPage(2)}>
                Go to page 2
              </button>
            </animated.div>
          ) : (
            <animated.div style={styles}>
              <h1>This is page 2</h1>
              <button type="button" onClick={() => setPage(1)}>
                Go back to page 1
              </button>
            </animated.div>
          )
        })}
      </div>

      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione incidunt atque est sunt deleniti esse adipisci
        quibusdam et enim alias accusantium, itaque beatae voluptates, ex illo harum repudiandae veniam inventore.
      </p>
    </div>
  )
}

这是我期望/希望发生的事情：

单击“转到第 2 页”将使第 1 页组件在 1 秒内淡出。
在第 1 页的不透明度达到 0 后，它将卸载，同时第 2 页将以 0 的不透明度进行挂载（以防止两个段落之间出现空白）。
页面 2 将在 1 秒内淡入。
单击“返回到第 1 页”应该执行与上述相同的步骤，当然组件颠倒了。

我不确定为什么这对我来说没有按预期工作。动画使淡出的组件略微向下跳，而另一个组件已经开始淡入，而第一个组件仍在淡出。

【问题讨论】：

标签： reactjs react-spring

【解决方案1】：

正如我回答 here 一样，它也可能会回答您的问题。在较新版本的 react-spring 中，您可以设置 exitBeforeEnter: true property 以等待项目在新项目进入之前动画出来。

【讨论】：