fix: fix nav animations (#2291)

Fixes #2290

src/routes/_components/NavItem.html

@@ -12,7 +12,7 @@
     />
     <span class="nav-link-label">{label}</span>
   </div>
-  <div class="nav-indicator-wrapper">
+  <div class="nav-indicator-wrapper {animationClasses}">
     <div class="nav-indicator" ref:indicator></div>
   </div>
 </a>
@@ -45,36 +45,37 @@
   .nav-indicator-wrapper {
     width: 100%;
     height: var(--nav-indicator-height);
-    background: var(--nav-a-border);
     display: flex;
   }
 
   .nav-indicator {
     flex: 1;
-    background: var(--nav-a-border);
     transform-origin: left;
   }
 
-  .nav-indicator.animate {
+  .nav-indicator {
+    background: var(--nav-indicator-bg);
+  }
+
+  .nav-indicator-wrapper.animating > .nav-indicator {
     transition: transform 333ms ease-in-out;
     will-change: transform;
   }
 
   .main-nav-link:hover .nav-indicator {
-    background: var(--nav-a-border-hover);
+    background: var(--nav-indicator-bg-hover);
-  }
-
-  .main-nav-link.selected .nav-indicator-wrapper {
-    background: var(--nav-a-border-hover);
   }
 
   .main-nav-link.selected .nav-indicator {
-    background: var(--nav-indicator-bg);
+    background: var(--nav-indicator-bg-active);
   }
 
-  .main-nav-link.selected:hover .nav-indicator {
+  /* Desktop/mouse only https://medium.com/@mezoistvan/finally-a-css-only-solution-to-hover-on-touchscreens-c498af39c31c */
+  @media(hover: hover) and (pointer: fine) {
+    .main-nav-link:hover .nav-indicator-wrapper.pre-animating {
       background: var(--nav-indicator-bg-hover);
     }
+  }
 
   .main-nav-link:hover {
     background-color: var(--nav-a-bg-hover);
@@ -129,6 +130,7 @@
   import { scrollToTop } from '../_utils/scrollToTop.js'
   import { normalizePageName } from '../_utils/normalizePageName.js'
   import { formatIntl } from '../_utils/formatIntl.js'
+  import { classname } from '../_utils/classname.js'
 
   export default {
     oncreate () {
@@ -148,6 +150,10 @@
       })
     },
     store: () => store,
+    data: () => ({
+      preAnimating: false,
+      animating: false
+    }),
     computed: {
       selected: ({ page, name }) => name === normalizePageName(page),
       ariaLabel: ({ selected, name, label, $numberOfNotifications, $numberOfFollowRequests }) => {
@@ -166,6 +172,10 @@
       ),
       badgeNumber: ({ name, $numberOfNotifications, $numberOfFollowRequests }) => (
         (name === 'notifications' && $numberOfNotifications) || (name === 'community' && $numberOfFollowRequests) || 0
+      ),
+      animationClasses: ({ animating, preAnimating }) => classname(
+        animating && 'animating',
+        preAnimating && 'pre-animating'
       )
     },
     methods: {
@@ -187,7 +197,7 @@
         emit('animateNavPart2', { fromRect, toPage })
       },
       animatePart2 ({ fromRect }) {
-        const indicator = this.refs.indicator
+        const { indicator } = this.refs
         mark('animateNavPart2 gBCR')
         const toRect = indicator.getBoundingClientRect()
         stop('animateNavPart2 gBCR')
@@ -196,11 +206,12 @@
         indicator.style.transform = `translateX(${translateX}px) scaleX(${scaleX})`
         const onTransitionEnd = () => {
           indicator.removeEventListener('transitionend', onTransitionEnd)
-          indicator.classList.remove('animate')
+          this.set({ animating: false, preAnimating: false })
         }
         indicator.addEventListener('transitionend', onTransitionEnd)
+        this.set({ preAnimating: true }) // avoids a flicker before the doubleRAF
         doubleRAF(() => {
-          indicator.classList.add('animate')
+          this.set({ animating: true })
           indicator.style.transform = ''
         })
       }

src/scss/themes/_base.scss

@@ -28,19 +28,17 @@
   --nav-bg: #{$main-theme-color};
   --nav-active-bg: #{lighten($main-theme-color, 3%)};
   --nav-border: #{darken($main-theme-color, 10%)};
-  --nav-a-border: #{$main-theme-color};
-  --nav-a-selected-border: #{$secondary-text-color};
   --nav-a-selected-bg: #{lighten($main-theme-color, 3%)};
   --nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
   --nav-svg-fill: #{$secondary-text-color};
   --nav-text-color: #{$secondary-text-color};
-  --nav-indicator-bg: #{rgba($secondary-text-color, 0.8)};
+  --nav-indicator-bg: #{$main-theme-color};
-  --nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)};
+  --nav-indicator-bg-active: #{mix($secondary-text-color, $main-theme-color, 90%)};
+  --nav-indicator-bg-hover: #{mix($secondary-text-color, $main-theme-color, 60%)};
 
   --nav-a-selected-border-hover: #{$secondary-text-color};
   --nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
   --nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
-  --nav-a-border-hover: #{rgba($secondary-text-color, 0.6)};
   --nav-svg-fill-hover: #{$secondary-text-color};
   --nav-text-color-hover: #{$secondary-text-color};
 

src/scss/themes/cobalt.scss

@@ -32,7 +32,6 @@ $compose-background: lighten($main-theme-color, 32%);
   --nav-text-color: #{$main-text-color};
   --nav-svg-fill-hover: #{$main-text-color};
   --nav-text-color-hover: #{$main-text-color};
-  --nav-a-selected-border: #{$anchor-color};
   --nav-a-selected-border-hover: #{$anchor-color};
 
   accent-color: #{lighten($main-theme-color, 15%)};

src/scss/themes/dark-grayscale.scss

@@ -24,4 +24,6 @@ $compose-background: lighten($main-theme-color, 52%);
   --action-button-fill-color-pressed: #{darken($anchor-color, 7%)};
   --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
   --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
+
+  --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
 }

src/scss/themes/hacker.scss

@@ -15,3 +15,7 @@ $compose-background: lighten($main-theme-color, 52%);
 @import "_dark.scss";
 @import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
+
+:root {
+  --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
+}

src/scss/themes/punk.scss

@@ -15,3 +15,7 @@ $compose-background: lighten($main-theme-color, 52%);
 @import "_dark.scss";
 @import "_dark_navbar.scss";
 @import "_dark_scrollbars.scss";
+
+:root {
+  --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
+}

src/scss/themes/riot.scss

@@ -18,4 +18,5 @@ $compose-background: lighten($main-theme-color, 52%);
 
 :root {
   accent-color: #{darken($main-theme-color, 5%)};
+  --nav-indicator-bg: #{$main-theme-color}; // special override on the nav indicator color
 }