supress transition with css

src/client/js/components/Sidebar.jsx

@@ -81,7 +81,7 @@ class Sidebar extends React.Component {
 
       // clear transition temporary
       if (this.sidebarCollapsedCached) {
-        this.clearNavigationTransitionTemporary(this.navigationElem);
+        this.addCssClassTemporary('grw-sidebar-supress-transitions-to-drawer');
       }
 
       navigationUIController.disableResize();
@@ -91,10 +91,9 @@ class Sidebar extends React.Component {
     }
     // Drawer --> Dock
     else {
-      // clear transition temporary when restore collapsed sidebar
+      // clear transition temporary
       if (this.sidebarCollapsedCached) {
-        this.clearNavigationTransitionTemporary(this.ctxNavigationElem);
-        this.clearNavigationTransitionTemporary(this.contentElem);
+        this.addCssClassTemporary('grw-sidebar-supress-transitions-to-dock');
       }
 
       navigationUIController.enableResize();
@@ -106,27 +105,17 @@ class Sidebar extends React.Component {
     }
   }
 
-  get navigationElem() {
-    return document.querySelector('div[data-testid="Navigation"]');
-  }
-
-  get ctxNavigationElem() {
-    return document.querySelector('div[data-testid="ContextualNavigation"]');
+  get sidebarElem() {
+    return document.querySelector('.grw-sidebar');
   }
 
-  get contentElem() {
-    return document.querySelector('div[data-testid="Content"]');
-  }
-
-  clearNavigationTransitionTemporary(elem) {
-    const transitionCache = elem.style.transition;
-
+  addCssClassTemporary(className) {
     // clear
-    elem.style.transition = undefined;
+    this.sidebarElem.classList.add(className);
 
     // restore after 300ms
     setTimeout(() => {
-      elem.style.transition = transitionCache;
+      this.sidebarElem.classList.remove(className);
     }, 300);
   }
 

src/client/styles/scss/_sidebar.scss

@@ -159,6 +159,22 @@
   }
 }
 
+// supress transition
+.grw-sidebar {
+  &.grw-sidebar-supress-transitions-to-drawer {
+    div[data-testid='Navigation'] {
+      transition: none !important;
+    }
+  }
+
+  &.grw-sidebar-supress-transitions-to-dock {
+    div[data-testid='Content'],
+    div[data-testid='ContextualNavigation'] {
+      transition: none !important;
+    }
+  }
+}
+
 .grw-sidebar-backdrop.modal-backdrop {
   z-index: $zindex-fixed - 4;
 }