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

@@ -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;
     }