Merge pull request #1 from Lumen5/add-setTimeout-fallback

Add set timeout fallback

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-flip-move",
-  "version": "3.0.5",
+  "name": "lumen5-react-flip-move",
+  "version": "3.0.6",
   "description": "Effortless animation between DOM changes (eg. list reordering) using the FLIP technique.",
   "main": "dist/react-flip-move.cjs.js",
   "module": "dist/react-flip-move.es.js",

src/FlipMove.js

@@ -460,15 +460,17 @@ class FlipMove extends Component<ConvertedProps, FlipMoveState> {
       });
     });
 
-    this.bindTransitionEndHandler(child);
+    this.bindTransitionEndHandler(child, index);
   }
 
-  bindTransitionEndHandler(child: ChildData) {
+  bindTransitionEndHandler(child: ChildData, index: number) {
     const { domNode } = this.getChildData(getKey(child));
     if (!domNode) {
       return;
     }
 
+    let called = false;
+    let timeoutId;
     // The onFinish callback needs to be bound to the transitionEnd event.
     // We also need to unbind it when the transition completes, so this ugly
     // inline function is required (we need it here so it closes over
@@ -478,20 +480,36 @@ class FlipMove extends Component<ConvertedProps, FlipMoveState> {
       // but on a nested transition (eg. a hover effect). Ignore these cases.
       if (ev.target !== domNode) return;
 
+      called = true;
+
       // Remove the 'transition' inline style we added. This is cleanup.
       domNode.style.transition = '';
 
       // Trigger any applicable onFinish/onFinishAll hooks
       this.triggerFinishHooks(child, domNode);
 
       domNode.removeEventListener(transitionEnd, transitionEndHandler);
+      window.clearTimeout(timeoutId);
 
       if (child.leaving) {
         this.removeChildData(getKey(child));
       }
     };
 
     domNode.addEventListener(transitionEnd, transitionEndHandler);
+
+    let { delay, duration } = this.props;
+    const { staggerDurationBy, staggerDelayBy } = this.props;
+
+    delay += index * staggerDelayBy;
+    duration += index * staggerDurationBy;
+
+    timeoutId = window.setTimeout(() => {
+      if (!called) {
+        const event = new Event(transitionEnd);
+        domNode.dispatchEvent(event);
+      }
+    }, delay + duration);
   }
 
   triggerFinishHooks(child: ChildData, domNode: HTMLElement) {