From 74aa9d88c54697b95f8e60985438cf323a228c50 Mon Sep 17 00:00:00 2001
From: Philip Peitsch <philip.peitsch@gmail.com>
Date: Thu, 2 Feb 2023 19:52:51 +1100
Subject: [PATCH] fix(panel): fix panel close routine if it was closed
 immediately (#4127)

fixes #4108 (again)

In practice, the time until the transition start is variable depending on
the browser, amongst other things. Android + Chrome is between 27 => 44ms
with a fast phone, but can take longer under many circumstances.

This removes the hardcoded time and instead looks for the transition start.
---
 src/core/components/panel/panel-class.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/core/components/panel/panel-class.js b/src/core/components/panel/panel-class.js
index 62af44d5a0..886287d400 100644
--- a/src/core/components/panel/panel-class.js
+++ b/src/core/components/panel/panel-class.js
@@ -289,7 +289,7 @@ class Panel extends Framework7Class {
   onOpen(modifyHtmlClasses = true) {
     const panel = this;
     // eslint-disable-next-line
-    panel._openTimeStamp = new Date().getTime();
+    panel._openTransitionStarted = false;
     const app = panel.app;
 
     panel.opened = true;
@@ -442,6 +442,13 @@ class Panel extends Framework7Class {
     }
     const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
 
+    function panelTransitionStart() {
+      transitionEndTarget.transitionStart(() => {
+        // eslint-disable-next-line
+        panel._openTransitionStarted = true;
+      });
+    }
+
     function panelTransitionEnd() {
       transitionEndTarget.transitionEnd((e) => {
         if ($(e.target).is(transitionEndTarget)) {
@@ -457,6 +464,7 @@ class Panel extends Framework7Class {
       if ($backdropEl) {
         $backdropEl.removeClass('not-animated');
       }
+      panelTransitionStart();
       panelTransitionEnd();
       $el.removeClass('panel-out not-animated').addClass('panel-in');
       panel.onOpen();
@@ -488,8 +496,7 @@ class Panel extends Framework7Class {
     }
     const transitionEndTarget = effect === 'reveal' ? $viewEl : $el;
     // eslint-disable-next-line
-    const openTimeDiff = new Date().getTime() - panel._openTimeStamp;
-    if (openTimeDiff < 16) {
+    if (!panel._openTransitionStarted) {
       // eslint-disable-next-line
       animate = false;
     }