fix: fix nav animations

Fixes #2290
This commit is contained in:
Nolan Lawson 2022-12-03 12:15:09 -08:00
parent 6d6eb59f41
commit 7d7633eb69
6 changed files with 44 additions and 17 deletions

View File

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

View File

@ -34,13 +34,14 @@
--nav-a-selected-active-bg: var(--nav-a-selected-bg-hover); --nav-a-selected-active-bg: var(--nav-a-selected-bg-hover);
--nav-svg-fill: #{$secondary-text-color}; --nav-svg-fill: #{$secondary-text-color};
--nav-text-color: #{$secondary-text-color}; --nav-text-color: #{$secondary-text-color};
--nav-indicator-bg: #{rgba($secondary-text-color, 0.8)}; --nav-indicator-bg: #{mix($secondary-text-color, $main-theme-color, 90%)};
--nav-indicator-bg-hover: #{rgba($secondary-text-color, 0.6)}; --nav-indicator-bg-hover: #{mix($secondary-text-color, $main-theme-color, 60%)};
--nav-indicator-bg-theme: #{$main-theme-color};
--nav-a-selected-border-hover: #{$secondary-text-color}; --nav-a-selected-border-hover: #{$secondary-text-color};
--nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)}; --nav-a-selected-bg-hover: #{lighten($main-theme-color, 4.5%)};
--nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)}; --nav-a-bg-hover: #{lighten($main-theme-color, 1.5%)};
--nav-a-border-hover: #{rgba($secondary-text-color, 0.6)}; --nav-a-border-hover: #{lighten($main-theme-color, 25%)};
--nav-svg-fill-hover: #{$secondary-text-color}; --nav-svg-fill-hover: #{$secondary-text-color};
--nav-text-color-hover: #{$secondary-text-color}; --nav-text-color-hover: #{$secondary-text-color};

View File

@ -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: #{darken($anchor-color, 7%)};
--action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)}; --action-button-fill-color-pressed-hover: #{darken($anchor-color, 2%)};
--action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)}; --action-button-fill-color-pressed-active: #{darken($anchor-color, 15%)};
--nav-indicator-bg-theme: #{$main-theme-color}; // special override on the nav indicator color
} }

View File

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

View File

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

View File

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