mirrors/desktop
1
0
Fork 0
mirror of https://github.com/zen-browser/desktop.git synced 2025-10-03 08:28:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Enhance tab animation effects by adjusting transform and margin properties for smoother transitions

Browse Source
This commit is contained in:
mr. M
2025-01-29 22:49:36 +01:00
parent b9dd0c6bf1
commit db5dd9ba7f
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/browser/base/content/ZenUIManager.mjs
View File

@@ -217,13 +217,15 @@ var gZenVerticalTabsManager = {
return; return;
} }
const isLastTab = aTab.nextElementSibling === null; const isLastTab = aTab.nextElementSibling === null;
const tabSize = aTab.getBoundingClientRect().height;
const transform = `-${tabSize}px`;
gZenUIManager.motion gZenUIManager.motion
.animate( .animate(
aTab, aTab,
{ {
opacity: [0, 1], opacity: [0, 1],
transform: ['translateY(-50px)', 'translateY(0px)'], transform: ["scale(0.95)", "scale(1)"],
marginBottom: isLastTab ? [] : ['-20px', '0px'], marginBottom: isLastTab ? [] : [transform, '0px'],
}, },
{ {
duration: 0.2, duration: 0.2,
@@ -234,7 +236,13 @@ var gZenVerticalTabsManager = {
aTab.style.removeProperty('margin-bottom'); aTab.style.removeProperty('margin-bottom');
aTab.style.removeProperty('transform'); aTab.style.removeProperty('transform');
aTab.style.removeProperty('opacity'); aTab.style.removeProperty('opacity');
aTab.style.removeProperty('filter'); });
gZenUIManager.motion
.animate(aTab.querySelector('.tab-stack'), {
filter: ['blur(2px)', 'blur(0px)'],
})
.then(() => {
aTab.querySelector('.tab-stack').style.removeProperty('filter');
}); });
}, },