mirror of
https://github.com/zen-browser/desktop.git
synced 2025-07-10 22:45:31 +02:00
Refactor tab animation logic to improve element selection and adjust animation durations for smoother transitions
This commit is contained in:
parent
1536f5805e
commit
c89e953b6e
1 changed files with 13 additions and 8 deletions
|
@ -1322,34 +1322,39 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
|
||||||
}
|
}
|
||||||
|
|
||||||
async _animateTabs(direction, out = false) {
|
async _animateTabs(direction, out = false) {
|
||||||
const selector = `#tabbrowser-tabs *:is(.tabbrowser-tab:not([zen-essential], [hidden]), #tabbrowser-arrowscrollbox-periphery, #zen-current-workspace-indicator)`;
|
const selector = `#tabbrowser-tabs *:is(#zen-current-workspace-indicator, #vertical-pinned-tabs-container-separator, .tabbrowser-tab:not([zen-essential], [hidden]))`;
|
||||||
|
const extraSelector = `#tabbrowser-arrowscrollbox-periphery > toolbarbutton`;
|
||||||
this.tabContainer.removeAttribute('dont-animate-tabs');
|
this.tabContainer.removeAttribute('dont-animate-tabs');
|
||||||
|
// order by actual position in the children list to animate
|
||||||
|
const elements = Array.from([...this.tabContainer.querySelectorAll(selector), ...this.tabContainer.querySelectorAll(extraSelector)]).sort(
|
||||||
|
(a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
|
||||||
|
).reverse();
|
||||||
if (out) {
|
if (out) {
|
||||||
return gZenUIManager.motion.animate(
|
return gZenUIManager.motion.animate(
|
||||||
selector,
|
elements,
|
||||||
{
|
{
|
||||||
transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
|
transform: `translateX(${direction === 'left' ? '-' : ''}100%)`,
|
||||||
opacity: 0,
|
opacity: 0,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
type: 'spring',
|
type: 'spring',
|
||||||
duration: 0.2,
|
bounce: 0,
|
||||||
bounce: 0.2,
|
duration: 0.12,
|
||||||
// delay: gZenUIManager.motion.stagger(0.01),
|
// delay: gZenUIManager.motion.stagger(0.01),
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return gZenUIManager.motion.animate(
|
return gZenUIManager.motion.animate(
|
||||||
selector,
|
elements,
|
||||||
{
|
{
|
||||||
transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
|
transform: [`translateX(${direction === 'left' ? '-' : ''}100%)`, 'translateX(0%)'],
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
duration: 0.2,
|
duration: 0.15,
|
||||||
type: 'spring',
|
type: 'spring',
|
||||||
bounce: 0.2,
|
bounce: 0,
|
||||||
// delay: gZenUIManager.motion.stagger(0.01),
|
// delay: gZenUIManager.motion.stagger(0.02),
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue