fix: entering animation with mountOnEnter and unmountOnExit

Author: koba04

src/Transition.js

@@ -5,6 +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"
 
 export const UNMOUNTED = 'unmounted';
 export const EXITED = 'exited';
@@ -212,7 +213,15 @@ class Transition extends React.Component {
       this.cancelNextCallback();
 
       if (nextStatus === ENTERING) {
-        this.performEnter(mounting);
+        // 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);
+        }
       } else {
         this.performExit();
       }

src/utils/nextTick.js

@@ -0,0 +1,7 @@
+// polyfill for requestAnimationFrame
+const rAF = typeof window !== "undefined" && typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame : cb => setTimeout(cb, 1)
+
+// https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+// Note: Your callback routine must itself call requestAnimationFrame() again
+// if you want to animate another frame at the next repaint. requestAnimationFrame() is 1 shot.
+export const nextTick = cb => rAF(() => rAF(cb))