fix: apply entering animation synchronously when unmountOnExit or mountOnEnter is enabled (#847)

* fix: apply entering animation synchronously when unmountOnExit or mountOnEnter is enabled

* chore: run prettier

* chore: remove unused nextTick

Author: paxaxel223

src/CSSTransition.js

@@ -6,6 +6,7 @@ import React from 'react';
 
 import Transition from './Transition';
 import { classNamesShape } from './utils/PropTypes';
+import { forceReflow } from './utils/reflow';
 
 const addClass = (node, classes) =>
   node && classes && classes.split(' ').forEach((c) => addOneClass(node, c));
@@ -194,8 +195,7 @@ class CSSTransition extends React.Component {
     // This is to force a repaint,
     // which is necessary in order to transition styles when adding a class name.
     if (phase === 'active') {
-      /* eslint-disable no-unused-expressions */
-      node && node.scrollTop;
+      if (node) forceReflow(node);
     }
 
     if (className) {

src/Transition.js

@@ -5,7 +5,7 @@ import ReactDOM from 'react-dom';
 import config from './config';
 import { timeoutsShape } from './utils/PropTypes';
 import TransitionGroupContext from './TransitionGroupContext';
-import { nextTick } from './utils/nextTick';
+import { forceReflow } from './utils/reflow';
 
 export const UNMOUNTED = 'unmounted';
 export const EXITED = 'exited';
@@ -213,15 +213,16 @@ class Transition extends React.Component {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
-        // https://github.com/reactjs/react-transition-group/pull/749
-        // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
-        // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
         if (this.props.unmountOnExit || this.props.mountOnEnter) {
-          // `exited` -> `entering`
-          nextTick(() => this.performEnter(mounting));
-        } else {
-          this.performEnter(mounting);
+          const node = this.props.nodeRef
+            ? this.props.nodeRef.current
+            : ReactDOM.findDOMNode(this);
+          // https://github.com/reactjs/react-transition-group/pull/749
+          // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.
+          // To make the animation happen,  we have to separate each rendering and avoid being processed as batched.
+          if (node) forceReflow(node);
         }
+        this.performEnter(mounting);
       } else {
         this.performExit();
       }

src/utils/nextTick.js

@@ -0,0 +1 @@
+export const forceReflow = (node) => node.scrollTop;