反应过渡组和弹性框：由于显示/隐藏其他元素而改变大小的动画元素？

Question

我在我的反应用户界面中使用不同的动画选项。在一个用户界面中，我有一个弹性盒容器和三个柔性盒。当我切换一个框时，它们按预期显示和动画。 （我正在使用veloocity-ui以防万一）

方框A和方框C，flex-grow设置为1 方框B具有固定的宽度。

因此，如果我们切换其中一个方框，则其他方框中的至少一个将在宽度上增大/缩小。

正如我所提到的，我们正在切换的元素上的动画正在按预期工作 我的问题：有没有办法在响应中增长/缩小时动画其他元素？

这是BoxesView：

const BoxesView = (props) => {

    const viewState = props.ViewState;

    console.log('viewState', viewState);

    return (
        <div>
            <div>
                <button className="btn btn-primary" onClick={(evt) => viewState.toggleBox('A')}>Toggle Box A</button>
                <button className="btn btn-primary"  onClick={(evt) => viewState.toggleBox('B')}>Toggle Box B</button>
                <button className="btn btn-primary"  onClick={(evt) => viewState.toggleBox('C')}>Toggle Box C</button>
            </div>
            <TransitionGroup component="div" className="boxes_container">
                { viewState.showBoxA ? <Box id="A"></Box> : null }
                { viewState.showBoxB ? <Box id="B"></Box> : null }
                { viewState.showBoxC ? <Box id="C"></Box> : null }
            </TransitionGroup>
        </div>
    )
}

这是scss

#boxA{
    background-color: #F00;
    flex: 1 0 auto;


}

#boxB{
    background-color: #0F0;
    flex: 0 0 580px
}

#boxC{
    background-color: #00F;

    flex: 1 0 auto;
}

.boxes_container{
    display: flex;
    flex-direction: row;
    //align-items: center;
    justify-content: center;
    width: 100%;

    .box{
        padding: 20px;


    }
}