React CSSTransition For a single image with a changing [src] value? - css

Question

I am working on a carousel that provides an alternating src value to an image. This does work, however I cannot get React CSSTransition to work, since technically it is the same element just with a changing src value that is bound to a state variable.
Here is the code:
<CSSTransition
classNames="carousel"
in={true}
appear={true}
timeout={1000}
>
<img
src={this.state.imgLink}
key={this.state.imgLink}
/>
</CSSTransition>
Any advice is greatly appreciated!
Cheers,
Gabe

Answer 1

If you're in a state managed component you could use a switch variable in your state to tell CSSTransition when the src attribute is changing (by putting it on true) and then putting it back to false when the first transition is completed (with a onEntered callback):
<CSSTransition
classNames="carousel"
in={this.state.changing}
onEntered={()=> this.setState({switch:false})}
appear={true}
timeout={1000}
>
<img
src={this.state.imgLink}
key={this.state.imgLink}
/>
</CSSTransition>
That would work nice with a fading effect.
But since your classNames is called carousel, I think you want to be able to move images around (like one exiting while another one entering). You won't be able to do that with only one <img> tag but you will by having one per image and unmounting them on exit (unmountOnExit prop) and managing them with an index variable on the state:
{pictures.map((p, i) => (
<CSSTransition
key={p.id}
in={i === this.state.index}
classNames="carousel"
timeout={1000}
>
<img
src={p.url}
className={i === this.state.index ? "fade-enter-done" : ""}
/>
</CSSTransition>
))}

Answer 2

This may not be the official way but I found that if you wrap CssTransition with TransitionGroup and move the key from img to CssTransition it will work as you want it to. The enter and exit animation will run at the same time, perfect for images to slide in and out at the same time or crossfade, etc.
<TransitionGroup component={null}>
<CSSTransition classNames="carousel" timeout={1000} key={this.state.imgLink}>
<img src={this.state.imgLink} />
</CSSTransition>
</TransitionGroup>
If you want one animation to start only after the other one has finished, wrap it with SwitchTransition.
Transition modes. out-in: Current element transitions out first, then when complete, the new element transitions in. in-out: New element transitions in first, then when complete, the current element transitions out.
type: 'out-in'|'in-out'
default: 'out-in'
<SwitchTransition mode={"out-in"}>
<CSSTransition classNames="carousel" timeout={1000} key={this.state.imgLink}>
<img src={this.state.imgLink} />
</CSSTransition>
</SwitchTransition>;