How to replace image with effect with React?

Question

I have the following code -

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>

Now I would like to replace the image 692.png with 693.png. I understand how to do with setState/src. But how to do it with some effect? Fade out/fade in? I found CSS transition property. Could it be used with React somehow?

What if I need to replace it with no image and replace no image with 692.png?

You check this http://reactcommunity.org/react-transition-group/transition? — Tushar Shahi, Jul 07 '21 at 06:39
Without using external library, it is possible actually @TusharShahi — Abin Thaha, Jul 07 '21 at 06:42
But replacing image with transition is a bit difficult task than having multiple images, and switching from one to another using transition. I prefer the latter — Abin Thaha, Jul 07 '21 at 06:43
@TusharShahi, thank you. I've used http://reactcommunity.org/react-transition-group/switch-transition from the same group - it works well. — LA_, Jul 09 '21 at 19:37

score 0 · Answer 1 · answered Jul 07 '21 at 07:16

0

As far as I understand, majority of the browsers supports:

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

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

! But this is not included in the standard.

answered Jul 07 '21 at 07:16

Alexander Alexandrov

1,254
5
15

score 0 · Accepted Answer · answered Jul 09 '21 at 19:38

0

Thanks to @TusharShahi I used http://reactcommunity.org/react-transition-group/switch-transition library.

answered Jul 09 '21 at 19:38

LA_

19,823
58
172
308

How to replace image with effect with React?

2 Answers2