From 7fdbd72f1301c4e46b712b86d272aefc3ba5b2e2 Mon Sep 17 00:00:00 2001 From: Nolan Lawson Date: Sat, 3 Dec 2022 16:48:22 -0800 Subject: [PATCH] fix: fix nav animations (#2291) Fixes #2290 --- src/routes/_components/NavItem.html | 41 ++++++++++++++++++----------- src/scss/themes/_base.scss | 8 +++--- src/scss/themes/cobalt.scss | 1 - src/scss/themes/dark-grayscale.scss | 2 ++ src/scss/themes/hacker.scss | 4 +++ src/scss/themes/punk.scss | 4 +++ src/scss/themes/riot.scss | 1 + 7 files changed, 40 insertions(+), 21 deletions(-) diff --git a/src/routes/_components/NavItem.html b/src/routes/_components/NavItem.html index d14d89f5..e4b8a9d6 100644 --- a/src/routes/_components/NavItem.html +++ b/src/routes/_components/NavItem.html @@ -12,7 +12,7 @@ /> {label} -
+
@@ -45,35 +45,36 @@ .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); - } - - .main-nav-link.selected .nav-indicator-wrapper { - background: var(--nav-a-border-hover); + background: var(--nav-indicator-bg-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 { - background: var(--nav-indicator-bg-hover); + /* 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 { @@ -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 = '' }) } diff --git a/src/scss/themes/_base.scss b/src/scss/themes/_base.scss index cb166f45..a3a8c603 100644 --- a/src/scss/themes/_base.scss +++ b/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-hover: #{rgba($secondary-text-color, 0.6)}; + --nav-indicator-bg: #{$main-theme-color}; + --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}; diff --git a/src/scss/themes/cobalt.scss b/src/scss/themes/cobalt.scss index 5fe375a6..62b1bc95 100644 --- a/src/scss/themes/cobalt.scss +++ b/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%)}; diff --git a/src/scss/themes/dark-grayscale.scss b/src/scss/themes/dark-grayscale.scss index 22644881..eebbd81a 100644 --- a/src/scss/themes/dark-grayscale.scss +++ b/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 } diff --git a/src/scss/themes/hacker.scss b/src/scss/themes/hacker.scss index 79fb4297..3619ec28 100644 --- a/src/scss/themes/hacker.scss +++ b/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 +} diff --git a/src/scss/themes/punk.scss b/src/scss/themes/punk.scss index 44e6fb9f..49420679 100644 --- a/src/scss/themes/punk.scss +++ b/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 +} diff --git a/src/scss/themes/riot.scss b/src/scss/themes/riot.scss index 8c4ed459..70900ccc 100644 --- a/src/scss/themes/riot.scss +++ b/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 }