Better media viewer caption transition

src/components/appMediaViewer.ts

@@ -657,6 +657,7 @@ class AppMediaViewerBase<ContentAdditionType extends string, ButtonsAdditionType
         mover.classList.add('hiding');
       }
 
+      this.wholeDiv.classList.add('backwards');
       setTimeout(() => {
         this.wholeDiv.classList.remove('active');
       }, 0);
@@ -1346,6 +1347,16 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
     this.content.caption.classList.add(MEDIA_VIEWER_CLASSNAME + '-caption'/* , 'media-viewer-stub' */);
 
     let captionTimeout: number;
+    const setCaptionTimeout = () => {
+      if(captionTimeout) {
+        clearTimeout(captionTimeout);
+      }
+
+      captionTimeout = window.setTimeout(() => {
+        captionTimeout = undefined;
+        this.content.caption.classList.remove('is-focused');
+      }, 800);
+    };
     this.content.caption.addEventListener('touchstart', () => {
       if(!mediaSizes.isMobile) return;
 
@@ -1356,15 +1367,11 @@ export default class AppMediaViewer extends AppMediaViewerBase<'caption', 'delet
         captionTimeout = undefined;
       }
       
-      document.addEventListener('touchend', () => {
-        captionTimeout = window.setTimeout(() => {
-          captionTimeout = undefined;
-          this.content.caption.classList.remove('is-focused');
-        }, 500);
-      }, {once: true});
+      document.addEventListener('touchend', setCaptionTimeout, {once: true});
     });
 
-    new Scrollable(this.content.caption);
+    const captionScrollable = new Scrollable(this.content.caption);
+    captionScrollable.onAdditionalScroll = setCaptionTimeout;
 
     //this.content.main.append(this.content.caption);
     this.wholeDiv.append(this.content.caption);

src/scss/partials/_mediaViewer.scss

@@ -130,11 +130,9 @@
     line-height: var(--line-height);
     white-space: pre-wrap;
     background-color: transparent;
-    visibility: hidden;
     
     @include animation-level(2) {
-      transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, visibility 0s, background-color var(--open-duration) ease-in-out;
-      transition-delay: 0s, 0s, 0s, 0s;
+      transition: transform var(--layer-transition), opacity var(--open-duration) ease-in-out, background-color var(--open-duration) ease-in-out;
     }
 
     a {
@@ -181,6 +179,10 @@
         transform: translate3d(0, -69px, 0);
       }
 
+      .media-viewer-whole.backwards & {
+        visibility: hidden;
+      }
+
       @include hover() {
         background-color: #000;
         opacity: 1 !important;
@@ -506,12 +508,15 @@
       > .btn-icon */ {
         opacity: 1;
         visibility: visible;
+
+        @include animation-level(2) {
           transition: opacity var(--open-duration) 0s, visibility 0s 0s;
         }
+      }
 
       .media-viewer-caption {
         visibility: visible;
-        transition-delay: 0s, 0s, var(--open-duration), 0s;
+        // transition-delay: 0s, 0s, var(--open-duration), 0s;
       }
     }