javascript - 如何在两个图像之间即时切换？

Question

我有一个用作菜单的抽屉。顶部有图像，底部有图标。当用户将鼠标悬停在抽屉上时，它会展开以显示更大的图像和带有文本的图标。

我的问题是:在此放大过渡期间，第一个图像放大(不好)并停留 1 ~ 5 秒，然后让位于第二个图像。

我想做的是，当用户将鼠标悬停在抽屉上时，第一张图片会立即隐藏起来，以便为第二张图片腾出空间。我希望删除此“延迟”。

(当你悬停时菜单没有立即 react 是另一个问题^^)

这是问题的动图: https://gyazo.com/064245b3bc87cabf6ffa62b51c506025

这是我用来在这两张图片之间切换的代码:

 <a href={'/'} className={'brand'}>
{sideWidth >= 200 ?
<img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/> 
    :
<img src='/images/SI.svg' className={"logoHub"} alt={"Logo Si infra"} />
}
</a>

是否有更简单或“更快”的方式来进行此图像转换？

(或者问题出在我的电脑上(它是本地的))

如果您需要更多可见代码，请告诉我。

编辑:

在所有成员的帮助和建议下，问题解决了!代码:

            <a href={'/'} className={'brand'}>
                {sideWidth >= 200 ?
                <>
                  <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'}/>
                  <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} style={{display:'none'}} />
                </>
                    :
                <>
                  <img src={'/images/SI_Infra.svg'} className={"logoHub"} alt={"Logo Si infra"} href={'/'} style={{display:'none'}}/>
                  <img src={'/images/SI.svg'} className={"logoHub"} alt={"Logo Si infra"} />
                </>
                }
            </a>

按照 Maxdola 的建议，我渲染了两张图像，但决定使用“display: 'none'”隐藏一张。这可能不是最好的解决方案，但它解决了我的问题!非常感谢!

Answer 1

问题是您正在重新渲染图像，因此浏览器随后会下载图像。

您应该渲染两个图像，但使一个不可见。