fix: enter animations with mountOnEnter or unmountOnExit (#749)

* fix: enter animation with mountOnEnter or unmountOnExit

* chore: add stories for mountOnEnter or unmountOnExit

* chore: apply prettier

* Update stories/CSSTransition.js

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,11 @@
+// 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));

stories/CSSTransition.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import StoryFixture from './StoryFixture';
+import Fade from './transitions/CSSFade';
+
+function ToggleFixture({ defaultIn, description, children }) {
+  const [show, setShow] = useState(defaultIn || false);
+
+  return (
+    <StoryFixture description={description}>
+      <div style={{ marginBottom: 10 }}>
+        <button
+          onClick={() => {
+            setShow(!show);
+          }}
+        >
+          Toggle
+        </button>
+      </div>
+      {React.cloneElement(children, { in: show })}
+    </StoryFixture>
+  );
+}
+
+storiesOf('CSSTransition', module)
+  .add('Fade', () => (
+    <ToggleFixture>
+      <Fade>asaghasg asgasg</Fade>
+    </ToggleFixture>
+  ))
+  .add('Fade with appear', () => (
+    <ToggleFixture defaultIn>
+      <Fade appear>asaghasg asgasg</Fade>
+    </ToggleFixture>
+  ))
+  .add('Fade with mountOnEnter', () => {
+    return (
+      <ToggleFixture>
+        <Fade mountOnEnter>Fade with mountOnEnter</Fade>
+      </ToggleFixture>
+    );
+  })
+  .add('Fade with unmountOnExit', () => {
+    return (
+      <ToggleFixture>
+        <Fade unmountOnExit>Fade with unmountOnExit</Fade>
+      </ToggleFixture>
+    );
+  });

stories/NestedTransition.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
 import StoryFixture from './StoryFixture';
-import Fade from './transitions/Fade';
+import Fade from './transitions/CSSFadeForTransitionGroup';
 import Scale from './transitions/Scale';
 
 function FadeAndScale(props) {

stories/Transition.js

@@ -60,4 +60,18 @@ storiesOf('Transition', module)
         <FadeInnerRef innerRef={nodeRef}>Fade using innerRef</FadeInnerRef>
       </ToggleFixture>
     );
+  })
+  .add('Fade with mountOnEnter', () => {
+    return (
+      <ToggleFixture>
+        <Fade mountOnEnter>Fade with mountOnEnter</Fade>
+      </ToggleFixture>
+    );
+  })
+  .add('Fade with unmountOnExit', () => {
+    return (
+      <ToggleFixture>
+        <Fade unmountOnExit>Fade with unmountOnExit</Fade>
+      </ToggleFixture>
+    );
   });

stories/TransitionGroup.js

@@ -6,7 +6,7 @@ import TransitionGroup from '../src/TransitionGroup';
 import CSSTransitionGroupFixture from './CSSTransitionGroupFixture';
 import NestedTransition from './NestedTransition';
 import StoryFixture from './StoryFixture';
-import Fade, { FADE_TIMEOUT } from './transitions/Fade';
+import Fade, { FADE_TIMEOUT } from './transitions/CSSFadeForTransitionGroup';
 
 storiesOf('Css Transition Group', module)
   .add('Animates on all', () => (

stories/index.js

@@ -1,3 +1,4 @@
 import './Transition';
+import './CSSTransition';
 import './TransitionGroup';
 import './ReplaceTransition';

stories/transitions/Bootstrap.js

@@ -12,7 +12,7 @@ import Transition, {
 const styles = css`
   .fade {
     opacity: 0;
-    transition: opacity 0.15s linear;
+    transition: opacity 0.5s linear;
   }
   .fade.in {
     opacity: 1;
@@ -47,7 +47,7 @@ export function Fade(props) {
       {...props}
       nodeRef={nodeRef}
       className={styles.fade}
-      timeout={150}
+      timeout={500}
     >
       {(status) => (
         <div

stories/transitions/CSSFade.js

@@ -0,0 +1,53 @@
+import { css } from 'astroturf';
+import React, { useRef } from 'react';
+
+import CSSTransition from '../../src/CSSTransition';
+
+export const FADE_TIMEOUT = 1000;
+
+const styles = css`
+  .default {
+    opacity: 0;
+  }
+  .enter-done {
+    opacity: 1;
+  }
+
+  .enter,
+  .appear {
+    opacity: 0.01;
+  }
+
+  .enter.enter-active,
+  .appear.appear-active {
+    opacity: 1;
+    transition: opacity ${FADE_TIMEOUT}ms ease-in;
+  }
+
+  .exit {
+    opacity: 1;
+  }
+  .exit.exit-active {
+    opacity: 0.01;
+    transition: opacity ${0.8 * FADE_TIMEOUT}ms ease-in;
+  }
+`;
+
+const defaultProps = {
+  in: false,
+  timeout: FADE_TIMEOUT,
+};
+function Fade(props) {
+  const nodeRef = useRef();
+  return (
+    <CSSTransition {...props} classNames={styles} nodeRef={nodeRef}>
+      <div ref={nodeRef} className={styles.default}>
+        {props.children}
+      </div>
+    </CSSTransition>
+  );
+}
+
+Fade.defaultProps = defaultProps;
+
+export default Fade;