How to make a box expand and transition from origin to center of screen without affecting DOM?

With CSS

Wery unlikely you can achieve that with plain css. And for sure impossible to achieve a versatile solution.

• You have a dynamic size and position to adopt to (starting div)
• You have to adapt to the current scrolling position
• If you remove the div from the layout is almost impossible to avoid screwing up the layout (even if you can, there will always be some edge case).
• transition from a relative to a fixed position.

With the current css standard is impossible to perform these things.

With JS

The solution is to do some javascript magic. Since you are using React i developed you a solution using react-spring (an animation framework). Here you have a wrapping component that will do what you want:

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>
    </>
  );
}

Note: This code uses two <div>, one to wrap your content, and the second one is always fixed but hidden. When you toggle the popup visibility, the wrapping div gets measured (we obtain its size and position on the screen) and the fixed div is animated from that position to its final position. You can achieve the illusion you are looking for by rendering the same content in both <div>, but there is always the risk of minor misalignment.

The idea is similar to what newbie did in their post but without any extra libraries. I might have done some things a bit non-standard to avoid using any libraries.

CodeSandbox

import React from "react";
import { StyledBox } from "./App.styles";

export const Box = (props) => {
  const boxRef = React.useRef(null);
  const { index, active, handleClick } = props;
  const handleBoxClick = () => {
    handleClick(index);
  };

  React.useEffect(() => {
    const b = boxRef.current;
    const a = b.querySelector(".active-class");
    a.style.left = b.offsetLeft + "px";
    a.style.top = b.offsetTop + "px";
    a.style.width = b.offsetWidth + "px";
    a.style.height = b.offsetHeight + "px";
  });

  return (
    <StyledBox active={active} onClick={handleBoxClick} ref={boxRef}>
      box {index}
      <div className="active-class">
        box {index}
        <div>
          <button
            onClick={(e) => {
              e.stopPropagation();
              handleClick(undefined);
            }}
          >
            make inactive
          </button>
        </div>
      </div>
    </StyledBox>
  );
};

import styled from "styled-components";

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

export const StyledBox = styled.div`
  flex: 1 0 32%;
  padding: 0.5rem;
  cursor: pointer;
  margin: 1rem;
  border: 1px solid red;

  background-color: white;

  .active-class {
    position: absolute;
    transition: 0.3s all ease-in;
    background-color: tomato;
    z-index: -1;

    ${({ active }) =>
      active
        ? `
      width: 50vw !important;
      height: 50vh !important;
      top: 50% !important;
      left: 50% !important; 
      transform: translate(-50%, -50%);
      z-index: 1;
      opacity: 1;
    `
        : `
      z-index: -1;
      transform: translate(0, 0);
      opacity: 0;
    `}
  }
`;

first, transition with position or display don't work on css(it can work but without transition).

here you have:

flex: 1 0 32%;

that is equivalent to :

flex-grow: 1;
flex-shrink: 1;
flex-basis: 32%;

so, when active is true, width would jump to 50vw and height to 50vh but roughly without transition. so the solution is to use scale like this:

  z-index: 99;
  transform: scaleY(5) scaleX(2) translate(20%, 20%);
background-tomato: tomato

and you need to tweak the values of scaleY, scaleX and translate (for each Box) until you get it to work.

you can take a look at what i did in this codesandbox: https://codesandbox.io/s/peaceful-payne-ewmxi?file=/src/App.js:1362-1432

here is also a link if you want master flex: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax

0. be sure that all your items have the following css properties : transform: translateX(0) translateY(0); transition: transform Xms timing-function-of-your-choice, left Xms timing, top Xms timing;
1. Until your page is completly loaded, let all the item in your page have the css property : position: static.
2. When page loads, retrive the items' properties : x offset from left of screen, y offset from top of document, width and height.
3. Use javascript to change the items properties : set position to fixed and affect the left, top, width and height css properties from the values we just retrieved. this way, the items will keep their exact position after their position property changes.
4. with javascript, when the box is clicked on, to center it inside your page, just apply the following css properties via javascript : left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: the width of your choice; height: the height of your choice; This way, your item will move in the center of your screen no matter what their width and origin offset were. Also, the transition will be very smooth. You might also want to change the z-index of an item when it is clicked.