From dea730f573a7c65c24113629f052f7c86de0bc50 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 17 Aug 2021 01:54:25 +0300
Subject: [PATCH] Transition: Fixes for frozen heavy animation

---
 src/components/ui/Transition.scss | 26 --------------------------
 src/components/ui/Transition.tsx  | 18 +++++++++++-------
 2 files changed, 11 insertions(+), 33 deletions(-)

diff --git a/src/components/ui/Transition.scss b/src/components/ui/Transition.scss
index 7bb2ade5c..833f0e0a9 100644
--- a/src/components/ui/Transition.scss
+++ b/src/components/ui/Transition.scss
@@ -23,32 +23,6 @@
     transition: none !important;
   }
 
-  /*
-   * scroll-slide
-   */
-
-  &.scroll-slide {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    display: flex;
-    flex-wrap: nowrap;
-
-    > * {
-      position: static;
-      flex-shrink: 0;
-
-      &:not(.active):not(.from):not(.to) {
-        display: block !important;
-        transform: scale(0);
-
-        &.through {
-          display: none !important;
-        }
-      }
-    }
-  }
-
   /*
    * slide
    */
diff --git a/src/components/ui/Transition.tsx b/src/components/ui/Transition.tsx
index f9f737c80..0e242e29e 100644
--- a/src/components/ui/Transition.tsx
+++ b/src/components/ui/Transition.tsx
@@ -51,7 +51,7 @@ const Transition: FC<OwnProps> = ({
 }) => {
   // No need for a container to update on change
   const { animationLevel } = getGlobal().settings.byKey;
-  const currentIndexRef = useRef<number>();
+  const currentKeyRef = useRef<number>();
 
   // eslint-disable-next-line no-null/no-null
   let containerRef = useRef<HTMLDivElement>(null);
@@ -147,7 +147,9 @@ const Transition: FC<OwnProps> = ({
 
       function onAnimationEnd() {
         requestAnimationFrame(() => {
-          if (activeIndex !== currentIndexRef.current) return;
+          if (activeKey !== currentKeyRef.current) {
+            return;
+          }
 
           container.classList.remove('animating', 'backwards');
 
@@ -179,14 +181,16 @@ const Transition: FC<OwnProps> = ({
         });
       }
 
-      const toNode = name === 'mv-slide'
+      const watchedNode = name === 'mv-slide'
         ? childNodes[activeIndex] && childNodes[activeIndex].firstChild
-        : childNodes[activeIndex];
+        : name === 'reveal' && isBackwards
+          ? childNodes[prevActiveIndex]
+          : childNodes[activeIndex];
 
-      currentIndexRef.current = activeKey;
+      currentKeyRef.current = activeKey;
 
-      if (animationLevel > 0 && toNode) {
-        waitForAnimationEnd(toNode, onAnimationEnd);
+      if (animationLevel > 0 && watchedNode) {
+        waitForAnimationEnd(watchedNode, onAnimationEnd);
       } else {
         onAnimationEnd();
       }