在使用React-Pose时如何调整现有div的大小（缩小）

Question

我在主页上有四列。这是我要完成的工作...

为简便起见，我仅以第一列的动画为例 如果我单击第一列（使用React-Pose“ pressable”），它将调整为视图的75％（在这种情况下，为4列中的3列）。发生这种情况时，应将其余3列“推”到右侧并缩小以划分视口中剩余的任何空间。我希望这是有道理的。

但是目前，当单击的列调整大小时，它仅与其他div重叠，因此无法单击它们。

我尝试使用纯CSS进行此操作，样式表变得非常冗长。我开始使用姿势和样式化的组件，因为要获得想要的效果要容易一些。

我尝试了z-index和flex-grow / shrink（可能做错了，但是我尝试了）

这是我的React js代码：

import React from "react";
import { render } from "react-dom";
import posed, { PoseGroup } from "react-pose";
import styled from "styled-components";
import { tween } from "popmotion";
import image from '../resources/alt_slide_three.jpg';

const Wrapper = styled.div`
width: 100vw;
height: 100vh;
overflow: hidden;
`;

const Container = posed.div({
    enter: { y: '0%', staggerChildren: 400 },
    exit: { y: '0%', staggerChildren: 500 },
    transition: {
        duration: 1000,
        ease: 'linear'
    }
})

const StyledContainer = styled(Container)`
  width: 25%;
  display: inline-flex;
  height: auto;
  align-items: center;
  background: black;
  justify-content: center;
  transform-origin: top;
`;


const Square = posed.div({
    exit: {
        scaleY: 0,
        opacity: 1,
        transition: props => tween({ ...props, duration: 2000 })
    },
    enter: {
        scaleY: 1,
        opacity: 1,
        transition: props => tween({ ...props, duration: 1000 })
    },
    pressable: true,
    init: { scale: 1 },
    pressEnd: { width: '75%' }

});

const StyledSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 25%;
  height: 100vh;
  transform-origin: top;
`;

// const AboutSquare = styled(Square)`
//   display: inline-flex;
//   width: 25%;
//   flex: 1 1 100px;
//   height: 100vh;
//   transform-origin: top;
// `;

const ApproachSquare = styled(Square)`
  display: inline-flex;
  width: 25%;

  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const TeamSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const ContactSquare = styled(Square)`
  display: inline-flex;
  width: 25%;
  flex: 1 1 auto;
  height: 100vh;
  background: white;
  transform-origin: top;
`;

const Column = styled.div`
    display: flex;
    width: 25%;
    height: 100vh;
    align-items: flex-end;
    justify-content: center;
    flex: 1 1 auto;
    opacity: 1;
    background-color: transparent;
    transition: opacity .6s ease-out;
    transition: opacity .6s ease-in;
    -moz-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    `;

const Line = posed.div({
    exit: {
        scaleY: 0,
        opacity: 1,
        transition: props => tween({ ...props, duration: 500, ease: 'in-out' })
    },
    enter: {
        scaleY: 1,
        opacity: 1,
        transition: props => tween({ ...props, duration: 500 })
    }
});

const Border = styled(Line)`
    display: flex;
    position: relative;
    width: 1px;
    height: 100vh;
    background: black;
    transform-origin: top;
  `;

const P = posed.p({
    exit: {
        opacity: 0,
        delay: 1000,
        transition: { duration: 500 }
    },
    enter: {
        opacity: 1,
        delay: 3000,
        transition: { duration: 500 }
    }
});

const Title = posed.span({
    exit: {
        opacity: 0,
        delay: 1000,
        transition: { duration: 500 }
    },
    enter: {
        opacity: 1,
        delay: 2000,
        transition: { duration: 500 }
    }
});


class Home extends React.Component {
    state = {
        clicked: false,
        isVisible: false,
        grow: false,

    };

    componentDidMount() {
        this.setState({
            isVisible: !this.state.isVisible
        });
    }

    onRest = () => {
        this.setState({
            isVisible: !this.state.isVisible
        });
    }


    render() {
        const { isVisible } = this.state;

        return (
            <Wrapper>
                <PoseGroup onRest exitPose='exit'>
                    {isVisible &&
                        <Container key="container">
                            <StyledSquare><Column><P>ABOUT2</P></Column><Border /></StyledSquare>
                            <ApproachSquare key="Square2"><Column><P>APPROACH</P></Column><Border /></ApproachSquare>
                            <TeamSquare key="Square3"><Column><P>TEAM</P></Column><Border /></TeamSquare>
                            <ContactSquare key="Square4"><Column><P>CONTACT</P></Column></ContactSquare>
                            <Title key="Forae" id="title">FORAE FACTORY</Title>
                        </Container>
                    }
                </PoseGroup>
            </Wrapper>
        );
    }
}

export default Home

以下是css（如果需要重复的话）：

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#title {
  pointer-events: none;
  font-size: 125px;
  font-weight: bold;
  font-family: 'Montserrat';
  position: absolute;
  bottom: 50%;
  left: 15%;
}

.fullscreen {
  z-index: 1;

  /* background-image: url("./resources/alt_slide_one.jpg"); */
  background-color: rgb(49, 49, 49);
  background-size: cover;
  width: 100%; 
  height: 100%; 
  position: fixed; 
  top: 0; 
  flex-basis: auto;
  left: 0; 
  opacity: 1;
  transition: width .6s ease-in;
}

我没有任何错误，我只是真的希望这些列是可见的并且相对于所单击的列而言是增大/缩小