fix: fix nav animations (#2291)

Fixes #2290
This commit is contained in:
Nolan Lawson 2022-12-03 16:48:22 -08:00 committed by GitHub
parent 62b30f6d99
commit 7fdbd72f13
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 40 additions and 21 deletions

View file

@ -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,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 = ''
})
}

View file

@ -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};

View file

@ -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%)};

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-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
}

View file

@ -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
}

View file

@ -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
}

View file

@ -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
}