javascript - 如何在不影响 DOM 的情况下使框展开并从原点过渡到屏幕中心？

Question

我正在尝试使一个框在被单击时扩展(在宽度和高度上)并从其原点过渡到屏幕的中心。这是我到目前为止所拥有的:
我在这里遇到了两个问题——当我单击框时，DOM 会自动移动，因为单击的元素的位置已更改为 'absolute' .另一个问题是盒子没有从它的原点转换，它从右下角转换(当点击make inactive时，它也没有从屏幕中心返回到它的位置)。
我在这里做错了什么？

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) => () => {
    console.log(index);
    setClickedBox(index);
  });

  return (
    <Container>
      {Array.from({ length: 5 }, (_, index) => (
        <Box
          key={index}
          active={clickedBox === index}
          onClick={handleClick(index)}
        >
          box {index}
          {clickedBox === index && (
            <div>
              <button
                onClick={(e) => {
                  e.stopPropagation();
                  handleClick(undefined)();
                }}
              >
                make inactive
              </button>
            </div>
          )}
        </Box>
      ))}
    </Container>
  );
}

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

const Box = styled.div`
  flex: 1 0 32%;
  padding: 0.5rem;
  cursor: pointer;
  margin: 1rem;
  border: 1px solid red;
  transition: 2s;
  background-color: white;
  ${({ active }) => `
    ${
      active
        ? `
      position: absolute;
      width: 50vw;
      height: 50vh;
      background-color: tomato;
      top: 50%;
      left: 50%; 
      transform: translate(-50%, -50%);
    `
        : ""
    }
  `}
`;

Answer 1

使用 CSS
你不太可能用简单的 css 来实现它。 .并且肯定不可能实现通用的解决方案。

你有一个动态的尺寸和位置来适应(起始 div)

你要适应当前的滚动位置

如果您删除 div从布局几乎不可能避免搞砸布局(即使可以，总会有一些边缘情况)。

从 relative 过渡到 fixed位置。

用电流 css标准是不可能执行这些事情的。
用JS
解决办法是做一些 javascript魔法。由于您使用的是 React我使用 react-spring 为您开发了一个解决方案(一个动画框架)。在这里，您有一个包装组件可以执行您想要的操作:
The complete SandBox

import React, { useEffect, useRef, useState } from "react";
import { useSpring, animated } from "react-spring";

export default function Popping(props) {
  const cont = useRef(null);
  const [oriSize, setOriSize] = useState(null);
  const [finalSize, setFinalSize] = useState(null);

  useEffect(() => {
    if (props.open && cont.current) {
      const b = cont.current.getBoundingClientRect();
      setOriSize({
        diz: 0,
        opacity: 0,
        top: b.top,
        left: b.left,
        width: b.width,
        height: b.height
      });
      const w = window.innerWidth,
        h = window.innerHeight;
      setFinalSize({
        diz: 1,
        opacity: 1,
        top: h * 0.25,
        left: w * 0.25,
        width: w * 0.5,
        height: h * 0.5
      });
    }
  }, [props.open]);

  const styles = useSpring({
    from: props.open ? oriSize : finalSize,
    to: props.open ? finalSize : oriSize,
    config: { duration: 300 }
  });

  return (
    <>
      <animated.div
        style={{
          background: "orange",
          position: "fixed",
          display:
            styles.diz?.interpolate((d) => (d === 0 ? "none" : "initial")) ||
            "none",
          ...styles
        }}
      >
        {props.popup}
      </animated.div>
      <div ref={cont} style={{ border: "2px solid green" }}>
        {props.children}
      </div>
    </>
  );
}

注意:此代码使用两个 <div> ，一个用来包装你的内容，第二个总是 fixed但隐藏。当您切换弹出窗口的可见性时，包装 div 被测量(我们获得它在屏幕上的大小和位置)和 fixed div 从该位置动画到其最终位置。您可以通过在 <div> 中呈现相同的内容来实现您正在寻找的错觉。 ，但总是存在轻微错位的风险。