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

Question

我有以下代码-

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。但是如何做到有效果呢？淡入淡出 out/fade？我找到了 CSS transition 属性。它能以某种方式与 React 一起使用吗？

如果需要替换成no image，把no image替换成692.png怎么办？

Answer 1

据我了解，大多数浏览器支持：

.cat {
  width: 500px;
  height: 500px;
  transition: background 1s;
}

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

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

Answer 2

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

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

How to replace image with effect with React?

css

image

effects

reactjs