0

Hi, I am trying to use React's CSSTransitionGroup to smoothly fade in a spinner for loading during an async call once a button is clicked, but even when I do everything according to the documentation (https://github.com/reactjs/react-transition-group/tree/v1-stable), the transition does not happen smoothly.

To describe what is actually happening more clearly, when the button is clicked:

  1. The button is "pushed down" by the length of the spinner on the page.
  2. At this point, the html is a div containing the spinner (with enter attributes) and the button underneath it (with leave attributes)
  3. The button fades out in what appears to be half a second. Once it has faded out, the spinner fades in.
  4. After a few seconds, the entire transition seems to have finished, and only the button exists (with correct spacing).

Code

 // App.js
 import { CSSTransitionGroup } from 'react-transition-group';

 export default class App extends Component {
     constructor(props) {
          super(props);
          this.renderButton = this.renderButton.bind(this);
     }

     renderButton(handleClick, fetching, fetched) {
          if (!fetching && !fetched) {
              return(<button className="async-btn" key="async-btn" type="button" onClick={handleClick}>Start Async</button>);
          }
          else {
               return(<Spinner key="spinner" />);
          }
      }

      render() {
      const { fetched, fetching, handleClick } = this.props;
          return (
              <CSSTransitionGroup
              transitionName="fade"
              transitionEnterTimeout={500}
              transitionLeaveTimeout={300}>
                  {this.renderButton(handleClick, fetching, fetched)}
              </CSSTransitionGroup>
          )
      }
}

// index.css
.fade-enter {
  opacity: 0.01;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.fade-leave {
  opacity: 1;
}

.fade-leave.fade-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

Questions

1) Can I NOT trigger successful transitions like I am doing with switching in between a button and component (which is simply a div with a img within it)? Or must it be a ul or array rendering?

2) Is there anything else that I am not following according to documentation?

Thank you.

gpsugy
  • 1,199
  • 1
  • 11
  • 25
  • I dont see any problem... there have to apper both elements during the transition. If you dont want to trigger transition so why you put it into transition? – Melounek Aug 18 '17 at 11:57
  • I apologize if this was not clear (what I am seeing is hard to describe). I want a transition, but the transition is not smooth at all. In fact, the transition looks like it's jumping down contrary to what I would think it looks like. Unless, is there a specific characteristic that I need to give in order to simply fade out and fade in using CSSTransitionGroups? – gpsugy Aug 18 '17 at 15:43
  • 1
    maybe you are missing positioning? It means you for example put `position: absolute` into .fade-leave class so it will be fading out like layer above. – Melounek Aug 18 '17 at 16:51

1 Answers1

0

The solution to fade in/out between two different elements seamlessly requires the container to be position: relative, with the element within the container having position: absolute.

Credit to Melounek for his helpful thought in the comments above.

This stackoverflow post is comprehensive and lays out the solution well: React animate transition between components

gpsugy
  • 1,199
  • 1
  • 11
  • 25