Removes Promise dependency

Avoids needing to polyfill for IE11. Also removes <StrictMode> from the demo, since that also doesn't work on IE 11 without a polyfill.
google-fabric · Apr 12, 2018 · b291064 · b291064
1 parent 01a8717
commit b291064
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 32 deletions.
diff --git a/demo/main.jsx b/demo/main.jsx
@@ -43,25 +43,23 @@ class Demo extends React.Component {
 class MainComponent extends React.Component {
   render() {
     return (
-      <React.StrictMode>
-        <div className="flex-box flex-wrap">
-          <Demo title="Property Change">
-            <ToggleBox />
-          </Demo>
-          <Demo title="On Demand">
-            <TriggerBox />
-          </Demo>
-          <Demo title="Custom Animation">
-            <FlapBox />
-          </Demo>
-          <Demo title="Custom Transition Group">
-            <ScrollingGroup />
-          </Demo>
-          <Demo title="Crossfade">
-            <CrossfadeExample />
-          </Demo>
-        </div>
-      </React.StrictMode>
+      <div className="flex-box flex-wrap">
+        <Demo title="Property Change">
+          <ToggleBox />
+        </Demo>
+        <Demo title="On Demand">
+          <TriggerBox />
+        </Demo>
+        <Demo title="Custom Animation">
+          <FlapBox />
+        </Demo>
+        <Demo title="Custom Transition Group">
+          <ScrollingGroup />
+        </Demo>
+        <Demo title="Crossfade">
+          <CrossfadeExample />
+        </Demo>
+      </div>
     );
   }
 }

diff --git a/src/velocity-transition-group.js b/src/velocity-transition-group.js
@@ -86,26 +86,30 @@ shimCancelAnimationFrame =
 // Internal wrapper for the transitioned elements. Delegates all child lifecycle events to the
 // parent VelocityTransitionGroup so that it can co-ordinate animating all of the elements at once.
 class VelocityTransitionGroupChild extends React.Component {
-  transitionPromise = Promise.resolve();
+  lastState = 'appear';
 
   componentWillEnter = (node, appearing) => {
-    this.transitionPromise = new Promise(resolve => {
-      if (appearing) {
-        this.props.willAppearFunc(node, resolve);
-      } else {
-        this.props.willEnterFunc(node, resolve);
-      }
-    });
+    this.lastState = appearing ? 'appear' : 'enter';
   };
 
-  componentWillExit = node => {
-    this.transitionPromise = new Promise(resolve => {
-      this.props.willLeaveFunc(node, resolve);
-    });
+  componentWillExit = () => {
+    this.lastState = 'exit';
   };
 
+  // We trigger our transitions out of endListener because that gives us access to the done callback
+  // we can use to tell the Transition that the animation has completed.
   endListener = (node, done) => {
-    this.transitionPromise.then(done);
+    switch (this.lastState) {
+      case 'appear':
+        this.props.willAppearFunc(node, done);
+        break;
+      case 'enter':
+        this.props.willEnterFunc(node, done);
+        break;
+      case 'exit':
+        this.props.willLeaveFunc(node, done);
+        break;
+    }
   };
 
   componentWillUnmount() {