Issue #3443866 by finnsky, markusVJH: The toggle button flickers on page load

(cherry picked from commit 20d5c8ad)

core/modules/navigation/css/base/variables.css

@@ -148,11 +148,6 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
   --admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
   --admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */
 
-  /**
-   * Transitions.
-   */
-  --admin-toolbar-transition: 150ms ease-out;
-
   /**
    * Z-index.
    *
@@ -168,6 +163,12 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
   --admin-toolbar-z-index-footer: var(--drupal-admin-z-index-footer, 701);
   --admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
 }
+/**
+  * Transitions.
+  */
+[data-admin-toolbar-transitions] {
+  --admin-toolbar-transition: 150ms ease-out;
+}
 @media (prefers-reduced-motion) {
   [data-drupal-admin-styles] {
     --admin-toolbar-transition: 0s linear;

core/modules/navigation/css/base/variables.pcss.css

@@ -145,11 +145,6 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
   --admin-toolbar-letter-spacing-0-8: var(--drupal-admin-letter-spacing-0-8, calc(0.05 * var(--admin-toolbar-rem))); /* 0.8px */
   --admin-toolbar-letter-spacing-0-06: var(--drupal-admin-letter-spacing-0-06, calc(0.00375 * var(--admin-toolbar-rem))); /* 0.06px */
 
-  /**
-   * Transitions.
-   */
-   --admin-toolbar-transition: 150ms ease-out;
-
   /**
    * Z-index.
    *
@@ -166,6 +161,13 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
   --admin-toolbar-z-index-tooltip: var(--drupal-admin-z-index-tooltip, 801);
 }
 
+/**
+  * Transitions.
+  */
+[data-admin-toolbar-transitions] {
+  --admin-toolbar-transition: 150ms ease-out;
+}
+
 @media (--admin-toolbar-reduced-motion) {
   [data-drupal-admin-styles] {
     --admin-toolbar-transition: 0s linear;

core/modules/navigation/css/components/admin-toolbar.css

@@ -156,7 +156,10 @@ body {
   width: calc(1 * var(--admin-toolbar-rem));
   height: calc(1 * var(--admin-toolbar-rem));
   content: "";
-  transition: transform var(--admin-toolbar-transition);
+  transition:
+    opacity var(--admin-toolbar-transition),
+    transform var(--admin-toolbar-transition);
+  opacity: 0;
   background-color: currentColor;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
@@ -167,6 +170,9 @@ body {
   -webkit-mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
   mask-image: url("data:image/svg+xml,%3csvg viewBox='0 0 8 8' xmlns='http://www.w3.org/2000/svg'%3e  %3cpath d='M5.7653 4.2653L3.2653 6.7653C3.19485 6.83575 3.0993 6.87532 2.99967 6.87532C2.90005 6.87532 2.8045 6.83575 2.73405 6.7653C2.6636 6.69485 2.62402 6.5993 2.62402 6.49967C2.62402 6.40005 2.6636 6.3045 2.73405 6.23405L4.96874 3.99999L2.73467 1.7653C2.69979 1.73042 2.67212 1.68901 2.65324 1.64343C2.63436 1.59785 2.62465 1.54901 2.62465 1.49967C2.62465 1.45034 2.63436 1.40149 2.65324 1.35592C2.67212 1.31034 2.69979 1.26893 2.73467 1.23405C2.76956 1.19917 2.81097 1.1715 2.85654 1.15262C2.90212 1.13374 2.95097 1.12402 3.0003 1.12402C3.04963 1.12402 3.09848 1.13374 3.14405 1.15262C3.18963 1.1715 3.23104 1.19917 3.26592 1.23405L5.76592 3.73405C5.80084 3.76893 5.82853 3.81036 5.84741 3.85596C5.86628 3.90157 5.87597 3.95045 5.87591 3.9998C5.87585 4.04916 5.86605 4.09802 5.84707 4.14358C5.82809 4.18914 5.8003 4.2305 5.7653 4.2653Z'/%3e%3c/svg%3e");
 }
+[data-admin-toolbar-transitions] .admin-toolbar__expand-button::before {
+  opacity: 1;
+}
 [dir="rtl"] .admin-toolbar__expand-button::before {
   transform: rotate(180deg);
 }

core/modules/navigation/css/components/admin-toolbar.pcss.css

@@ -163,13 +163,18 @@ body {
     width: calc(1 * var(--admin-toolbar-rem));
     height: calc(1 * var(--admin-toolbar-rem));
     content: '';
-    transition: transform var(--admin-toolbar-transition);
+    transition: opacity var(--admin-toolbar-transition), transform var(--admin-toolbar-transition);
+    opacity: 0;
     background-color: currentColor;
     mask-repeat: no-repeat;
     mask-position: center center;
     mask-size: 100% auto;
     mask-image: url(../../assets/icons/chevron.svg);
 
+    [data-admin-toolbar-transitions] & {
+      opacity: 1;
+    }
+
     [dir='rtl'] & {
       transform: rotate(180deg);
     }

core/modules/navigation/js/admin-toolbar-wrapper.js

@@ -46,7 +46,9 @@
 
             // This is special attribute which added to apply css
             // with animations and avoid layout shift.
-            doc.setAttribute('data-admin-toolbar-transitions', true);
+            setTimeout(() => {
+              doc.setAttribute('data-admin-toolbar-transitions', true);
+            }, 200);
 
             doc.addEventListener(HTML_TRIGGER_EVENT, (e) => {
               // Prevents multiple triggering while transitioning.