html 如何添加平滑动画来移除行中的一个元素并进行过渡？

oyjwcjzk 于 2023-08-01 发布在其他

关注(0)|答案(1)|浏览(108)

我需要显示一个文本沿着标志时，侧边栏是开放的，需要删除的名称时，侧边栏是关闭的动画。
我的react组件呈现如下所示

<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，那么徽标将居中，但我无法应用过渡。
有什么更好的方法来解决这个问题？

Html

来源：https://stackoverflow.com/questions/76768214/how-to-add-smooth-animation-to-remove-one-of-the-element-from-row-with-transitio

1条答案

按热度按时间

piwo6bdm1#

我可以用

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

字符串

赞(0）回复(0）举报 2023-08-01

我来回答

html 如何添加平滑动画来移除行中的一个元素并进行过渡？

1条答案

相关问题

热门标签

最新问答