如何实现盒子从原位置过渡到屏幕中心且不影响DOM布局

问题根源 #

• 布局移位问题：直接给激活状态的盒子设置position: absolute会让元素脱离正常文档流，它原本在flex布局中占据的位置直接消失，剩下的元素会自动重排补上空位，就出现了布局移位的问题。
• 动画异常问题：position、top、left不属于默认支持过渡的CSS属性，且你仅在激活状态定义了transform属性，非激活状态没有对应的初始值，两个状态的属性不匹配导致过渡链路断裂，自然无法实现平滑动画，只会出现位置跳跃的情况。

修复方案 #

核心思路是用占位容器固定原有布局位置，所有动画全部用支持过渡的CSS属性实现，具体修改后的代码如下：

import React from "react";
import styled from "styled-components";
import "./styles.css";

export default function App() {
  const [clickedBox, setClickedBox] = React.useState(undefined);

  const handleClick = React.useCallback((index) => () => {
    setClickedBox(index);
  }, []);

  return (
    <Container>
      {Array.from({ length: 5 }, (_, index) => (
        {/* 新增占位容器，固定占住原布局位置 */}
        <Placeholder key={index}>
          <Box
            active={clickedBox === index}
            onClick={handleClick(index)}
          >
            box {index}
            {clickedBox === index && (
              <div>
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    setClickedBox(undefined);
                  }}
                >
                  make inactive
                </button>
              </div>
            )}
          </Box>
        </Placeholder>
      ))}
    </Container>
  );
}

const Container = styled.div`
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 100vh;
`;

// 占位容器，不参与动画，始终保留原布局位置
const Placeholder = styled.div`
  flex: 1 0 32%;
  margin: 1rem;
  position: relative;
`;

const Box = styled.div`
  width: 100%;
  padding: 0.5rem;
  cursor: pointer;
  border: 1px solid red;
  // 明确指定过渡属性，同时设置transform初始值
  transition: transform 2s, width 2s, height 2s, background-color 2s;
  background-color: white;
  transform: translate(0, 0) scale(1);
  position: relative;
  ${({ active }) => active && `
    position: fixed;
    width: 50vw;
    height: 50vh;
    background-color: tomato;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
  `}
`;

核心修改说明 #

• 占位容器完全承接了原盒子的布局属性，始终留在文档流中占位置，内部盒子的动画不会影响外层布局，彻底解决了布局移位的问题。
• 给非激活状态的盒子添加了默认transform: translate(0, 0) scale(1)属性，激活和非激活状态的属性完全匹配，过渡动画可以正常衔接，解决了位置跳跃的问题。

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