From 63bb6d7554ad175abe31fd18576d907a4adfd7e2 Mon Sep 17 00:00:00 2001 From: Nigel Gutzmann Date: Tue, 5 Sep 2023 16:51:24 -0700 Subject: [PATCH 1/3] add-setTimeout-fallback --- src/FlipMove.js | 23 +++++++++++++++++++++-- 1 file changed, 21 insertions(+), 2 deletions(-) diff --git a/src/FlipMove.js b/src/FlipMove.js index 7f4dd25..358fb59 100644 --- a/src/FlipMove.js +++ b/src/FlipMove.js @@ -460,15 +460,16 @@ class FlipMove extends Component { }); }); - 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; // 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,6 +479,8 @@ class FlipMove extends Component { // 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 = ''; @@ -485,6 +488,7 @@ class FlipMove extends Component { this.triggerFinishHooks(child, domNode); domNode.removeEventListener(transitionEnd, transitionEndHandler); + window.clearTimeout(timeoutId); if (child.leaving) { this.removeChildData(getKey(child)); @@ -492,6 +496,21 @@ class FlipMove extends Component { }; domNode.addEventListener(transitionEnd, transitionEndHandler); + + let { delay, duration } = props; + const { staggerDurationBy, staggerDelayBy, easing } = props; + + delay += index * staggerDelayBy; + duration += index * staggerDurationBy; + + const timeoutId = window.setTimeout(() => { + if (!called) { + const event = new Event(); + event.target = domNode; + + transitionEndHandler(event); + } + }, delay + duration); } triggerFinishHooks(child: ChildData, domNode: HTMLElement) { From f933b24b88d40722e1dce1616641e87b47880084 Mon Sep 17 00:00:00 2001 From: Nigel Gutzmann Date: Wed, 6 Sep 2023 09:01:55 -0700 Subject: [PATCH 2/3] fixes --- package.json | 4 ++-- src/FlipMove.js | 13 ++++++------- 2 files changed, 8 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 753fcca..509e8ed 100644 --- a/package.json +++ b/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", diff --git a/src/FlipMove.js b/src/FlipMove.js index 358fb59..e75b8d7 100644 --- a/src/FlipMove.js +++ b/src/FlipMove.js @@ -470,6 +470,7 @@ class FlipMove extends Component { } 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 @@ -497,18 +498,16 @@ class FlipMove extends Component { domNode.addEventListener(transitionEnd, transitionEndHandler); - let { delay, duration } = props; - const { staggerDurationBy, staggerDelayBy, easing } = props; + let { delay, duration } = this.props; + const { staggerDurationBy, staggerDelayBy } = this.props; delay += index * staggerDelayBy; duration += index * staggerDurationBy; - const timeoutId = window.setTimeout(() => { + timeoutId = window.setTimeout(() => { if (!called) { - const event = new Event(); - event.target = domNode; - - transitionEndHandler(event); + const event = new Event(transitionEnd); + domNode.dispatchEvent(event); } }, delay + duration); } From 93eb2b3c094fbc1cf385688e42faef7799a793ad Mon Sep 17 00:00:00 2001 From: Nigel Gutzmann Date: Wed, 6 Sep 2023 15:43:43 -0700 Subject: [PATCH 3/3] package updates --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 509e8ed..1f507b4 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@Lumen5/react-flip-move", + "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",