Skip to content

Commit

Permalink
fix: change transition behavior to prevent two bottom bars appear sim…
Browse files Browse the repository at this point in the history
…ultaneously
  • Loading branch information
micaelagoffe committed Sep 2, 2024
1 parent 9d4d6e9 commit 6c755f6
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 21 deletions.
4 changes: 0 additions & 4 deletions cosmoz-bottom-bar.html.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ export default html`
width: 100%;
max-width: 100%; /* Firefox fix */
background-color: inherit;
transition: max-height 0.3s ease;
flex: none;
background-color: var(
--cosmoz-bottom-bar-bg-color,
Expand All @@ -32,9 +31,6 @@ export default html`
padding: 0;
};
}
:host([force-open]) {
transition: none;
}
[hidden],
::slotted([hidden]) {
display: none !important;
Expand Down
40 changes: 23 additions & 17 deletions cosmoz-bottom-bar.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable max-statements */
/* eslint-disable max-lines */
import {
PolymerElement,
Expand Down Expand Up @@ -371,31 +372,36 @@ class CosmozBottomBar extends PolymerElement {
}

_showHideBottomBar(visible) {
this.style.transitionDuration = 0;
this.style.display = '';
const info = this.shadowRoot.querySelector('#bar #info');

if (!this.id) {
this.style.viewTransitionName = 'bottom-bar-no-row-selected';
} else if (this.id === 'bottomBar') {
this.style.viewTransitionName = 'bottom-bar-rows-selected';
} else {
return;
}

this.style.maxHeight = '';
info.style.visibility = '';

const height = this.computedBarHeight,
to = !visible ? '0px' : height + 'px';
to = !visible ? '0px' : height + 'px',
from = visible ? '0px' : height + 'px';

let from = visible ? '0px' : height + 'px';
this.style.maxHeight = from;
info.style.visibility = 'hidden';

if (!this[rendered]) {
from = to;
this[rendered] = true;
if (!document.startViewTransition) {
this.style.transition = 'max-height 0.3s ease-in-out';
this.style.maxHeight = to;
info.style.visibility = 'visible';
return;
}

this.style.maxHeight = from;

const onEnd = () => {
this.removeEventListener('transitionend', onEnd);
this.style.maxHeight = '';
this.style.display = this.visible ? '' : 'none';
};
requestAnimationFrame(() => {
this.addEventListener('transitionend', onEnd);
this.style.transitionDuration = '';
document.startViewTransition(() => {
this.style.maxHeight = to;
info.style.visibility = 'visible';
});
}
}
Expand Down

0 comments on commit 6c755f6

Please sign in to comment.