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 Aug 28, 2024
1 parent 9d4d6e9 commit f8d7105
Showing 2 changed files with 15 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
@@ -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,
@@ -32,9 +31,6 @@ export default html`
padding: 0;
};
}
:host([force-open]) {
transition: none;
}
[hidden],
::slotted([hidden]) {
display: none !important;
32 changes: 15 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,
@@ -371,31 +372,28 @@ class CosmozBottomBar extends PolymerElement {
}

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

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

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

let from = visible ? '0px' : height + 'px';
to = !visible ? '0px' : height + 'px',
opacityTo = !visible ? '0' : '1';

if (!this[rendered]) {
from = to;
this[rendered] = true;
}
const from = visible ? '0px' : height + 'px',
opacityFrom = visible ? '0' : '1';

this.style.maxHeight = from;
bar.style.opacity = opacityFrom;
info.style.visibility = 'hidden';

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;
bar.style.opacity = opacityTo;
info.style.visibility = 'visible';
});
}
}

0 comments on commit f8d7105

Please sign in to comment.