如何用 React 替换带有效果的图像？

问题描述

我有以下代码 -

render() {
    return <DeviceThemeProvider><GlobalStyle /><div>
            <div class="grids">
                <div id="grid">
                    <div class="grid-element">
                        <img class="displayed" src={process.env.PUBLIC_URL + '/img/692.png'} />
                    </div>

现在我想用 693.png 替换图像 692.png。 I understand 如何处理 setState/src。但是如何做到有一定的效果呢？淡出/淡入？我找到了 CSS transition 属性。它可以以某种方式与 React 一起使用吗？

如果我需要用 no image 替换它并用 692.png 替换 no image 怎么办？

解决方法

据我所知，大多数浏览器都支持：

SELECT current_timestamp() - make_interval(0,col1,0) as diff from sample_table

https://jsfiddle.net/6jwqkes3/1/

！但这并没有包含在标准中。

,

感谢 @TusharShahi，我使用了 http://reactcommunity.org/react-transition-group/switch-transition 库。