如何使用@react-spring/web实现两个组件的淡入淡出过渡并修复异常

核心调整点 #

• 解决过渡交叉问题：在useTransition配置中新增exitBeforeEnter: true参数，该配置会强制等待前一个组件的淡出动画完全执行完成、组件卸载后，才会挂载新组件并执行淡入动画，完全符合你要求的串行过渡逻辑。
• 解决组件下移问题：原代码在enter、leave阶段动态切换position属性，未配置定位坐标的absolute元素会出现位置偏移。添加exitBeforeEnter后同一时间只会存在一个过渡组件，无需处理重叠问题，直接删除所有过渡配置中的position相关属性即可，元素保持正常文档流位置不会出现偏移。

修改后完整代码 #

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 },
    enter: { opacity: 1 },
    leave: { opacity: 0 },
    config: { duration: 1000 },
    exitBeforeEnter: true,
  })

  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>
        {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>
  )
}

内容的提问来源于stack exchange，提问作者chipit24