Use inline styles for animation

Avoids style calculation on entire document
timothy003 · Sep 12, 2019 · 1b8eb74 · 1b8eb74
1 parent 6e0297d
commit 1b8eb74
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 19 deletions.
diff --git a/static/mobilediscord.css b/static/mobilediscord.css
@@ -332,17 +332,6 @@
 .scroller-2wx7Hm {
     position: relative;
     z-index: 0;
-    animation: .2s cubic-bezier(0.0, 0.0, 0.2, 1) md-fade-in !important;
-}
-
-.md-navigating .messagesWrapper-3lZDfY,
-.md-navigating .noChannel-Z1DQK7 > .wrapper-r-6rrt,
-.md-navigating .scrollWrap-qwpLpa,
-.md-navigating .friendsTable-133bsv .friendsTableBody-1ZhKif,
-.md-navigating-guild .privateChannels-1nO12o .scroller-2FKFPG,
-.md-navigating .layout-1cQCv2,
-.md-navigating-guild .scroller-2wx7Hm {
-    animation: .1s cubic-bezier(0.4, 0.0, 1, 1) forwards md-fade-out !important;
 }
 
 /* modals */

diff --git a/static/mobilediscord.js b/static/mobilediscord.js
@@ -752,10 +752,19 @@ mdLocalStorage.token;
                 layer.style.animationName = "";
         });
     }
-    function animateNavigation(event, ...classes) {
-        document.documentElement.classList.add("md-navigating", ...classes);
+    function animateNavigation(event, guild) {
+        let selectors = ".messagesWrapper-3lZDfY," +
+            ".noChannel-Z1DQK7 > .wrapper-r-6rrt," +
+            ".scrollWrap-qwpLpa," +
+            ".friendsTable-133bsv .friendsTableBody-1ZhKif," +
+            ".layout-1cQCv2";
+        if (guild)
+            selectors += ", .privateChannels-1nO12o .scroller-2FKFPG, .scroller-2wx7Hm";
+        for (const element of document.querySelectorAll(selectors))
+            element.style.animation = ".1s cubic-bezier(0.4, 0.0, 1, 1) forwards md-fade-out";
         deferEvent(event).then(() => {
-            document.documentElement.classList.remove("md-navigating", ...classes);
+            for (const element of document.querySelectorAll(selectors))
+                element.style.animation = ".2s cubic-bezier(0.0, 0.0, 0.2, 1) md-fade-in";
         });
     }
     window.addEventListener("click", event => {
@@ -784,10 +793,7 @@ mdLocalStorage.token;
             if (document.querySelector(".contextMenu-HLZMGh"))
                 return;
             hideTooltip();
-            if (element.closest(".blob-3RT82C") && document.querySelector(".privateChannels-1nO12o"))
-                animateNavigation(event);
-            else
-                animateNavigation(event, "md-navigating-guild");
+            animateNavigation(event, !(element.closest(".blob-3RT82C") && document.querySelector(".privateChannels-1nO12o")));
             return;
         }
         // animate channel navigation
@@ -797,7 +803,7 @@ mdLocalStorage.token;
                 return;
             if (channel.matches(".channel-2QD9_O a") && document.querySelector(".contextMenu-HLZMGh"))
                 return;
-            animateNavigation(event);
+            animateNavigation(event, false);
             return;
         }