React animation: doubled element on state change

Question

I'm building an automatic slideshow that switch images every 5 seconds. I use the ReactCSSTransitionGroup to create a fade in method when the new image comes in. The issue is when the new image is fading in, the old image is still there and both images are showing on the screen, the old image won't leave until the new image is completely show up. How do I fix this?

This is my Slide component to display the image:

import React from 'react';    
const Slide = ({picture}) => {
  if(!picture){
    return <div>Loading...</div>;
  }    
  return (
      <div className='row'>
        <img src={picture.url} alt={picture.title} />
      </div>
  );
};    
export default Slide;

This is part of the parent component where I call this Slide component

  <ReactCSSTransitionGroup {...transitionOptions}>
    <Slide key={this.props.active} picture={this.props.active}/>
  </ReactCSSTransitionGroup>

This is in the render() method of the parent to set the options for transition

const transitionOptions = {
  transitionName: "fade",
  transitionEnterTimeout: 500,
  transitionLeaveTimeout: 500
}

And this is the style

.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  opacity: 1;
  transition: 0.5s ease-in all;
}

Basically in the parent component, I have a setInterval method that change the active image every 5 seconds. So how do I make the old image disappear the moment the new one is starting to fade it so that it won't change my page? Thank you

Without the key there wouldn't be any animation in the code i wrote. I think react is looking for something unique to know which element it is animating. And Ive seen a video somewhere if you have 2 of the exact element, it may animate the wrong one — stenwolf, Oct 22 '16 at 07:44

John Furrow · Accepted Answer · 2016-10-22T08:24:46.363

5

Remove the exit animation by setting the transitionLeave property to false, and remove the transitionLeaveTimeout property entirely. You've configured ReactCSSTransitionGroup to animate on enter and leave with a 500ms timer.

In my opinion, the transition would be nicer if the exiting Slide fades out while the entering Slide fades in. For this effect, you would need both Slide elements to be on top of each other, via absolute positioning. Here's an example of this: http://codepen.io/yeahjohnnn/pen/rrobvR

edited Oct 22 '16 at 08:24

answered Oct 22 '16 at 07:30

John Furrow

106
5

this works! thank you. But there's a moment the screen is flickering though, how do I make it smooth? – stenwolf Oct 22 '16 at 07:48
Can you share your code? The flicker could be due to a number of things. I suspect there is probably a perceived flicker from the image immediately disappearing while the next image begins to fade in. Check out this example, where I made the slides fade out on exit and fade in on entrance, with no flickering: http://codepen.io/yeahjohnnn/pen/rrobvR. Or, if you are using images, it's possible the flickering is due to the image loading, but I doubt that (you could pre-load the images and cache them if this is the case). – John Furrow Oct 22 '16 at 08:11
I found the issue with the flickering thing. So when it's switching image, the image was still loading so there was a fraction of a second when it didn't show anything. That makes the div I have the image in collapse. What I did was, I set the parent div with the width and height I wanted instead of the child div, which that contains the image. So when it's still loading, the side of the empty div is the same and it stopped the page from resizing. And thanks for your example in the code pen. I'll try to use it as a guideline to make mine fade in and out instead of just in only. – stenwolf Oct 22 '16 at 08:22

React animation: doubled element on state change

1 Answers1