如何添加平滑的动画以从带有过渡的 Row 中删除元素之一？

Question

我需要在侧边栏打开时显示文本和徽标，并且需要在侧边栏以动画关闭时删除名称。

我的反应组件渲染看起来像这样

<Row style={{
    justifyContent: 'center',
    alignItems: 'center',
    overflow: 'hidden',
    flexWrap: 'nowrap'
}}>
    <img src={Logo} width={32} />
    <span
        style={{
            fontFamily: 'Overpass',
            fontSize: 'x-large',
            fontWeight: '600',
            width: open ? 'auto' : '0px',
            transition: 'opacity 1s ease-in-out, width 1s ease-in-out, visibility 0.7s ease-in-out',
            opacity: open ? '1' : '0',
            visibility: open ? 'visible' : 'hidden',
            whiteSpace: 'nowrap'
        }}>
        Rigel
    </span>
</Row>

但这会创建不稳定的动画，当动画开始时，徽标和文本位置会发生变化，甚至在折叠后徽标也不会在行中居中。

请参考这个gif

似乎是因为它并没有脱离 DOM，只是隐藏了。如果我设置

display: none

那么徽标会居中，但我无法应用过渡。

有什么更好的方法来解决这个问题？