Javascript react transitiongroup和flexbox：为因显示/隐藏其他元素而改变大小的元素设置动画？

我在react UI中使用不同的动画选项。在一个UI中，我有一个flex box容器和三个flex box。它们按预期显示，并且在切换框时动画可以正常工作。（我正在使用Velocity ui以防出现问题）

flex grow设置为1的框A和框C。
框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>
    )
}

---

也许你可以做个演示？除非您的“切换”正在更改

display

属性，否则简单的转换应该可以。

#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;


    }
}