CODEWITHSUNDEEP
animationreactjsreactcsstransitiongroup
stenwolf
stenwolf

Reputation: 311

React animation: doubled element on state change

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

Upvotes: 2

Views: 2879

Answers (1)

John Furrow
John Furrow

Reputation: 106

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

Upvotes: 5

Related Questions