Add motion animation support and refine UI transitions for workspace interactions

This commit is contained in:
mr. M
2025-01-11 21:33:06 +01:00
parent 50a48cdf24
commit 1710ebae19
8 changed files with 36 additions and 44 deletions

View File

@@ -102,19 +102,30 @@
window.requestAnimationFrame(() => {
this.quickOpenGlance();
this.browserWrapper.style.setProperty('--initial-x', `${initialX}px`);
this.browserWrapper.style.setProperty('--initial-y', `${initialY}px`);
this.browserWrapper.style.setProperty('--initial-width', initialWidth + 'px');
this.browserWrapper.style.setProperty('--initial-height', initialHeight + 'px');
this.overlay.removeAttribute('fade-out');
this.browserWrapper.setAttribute('animate', true);
setTimeout(() => {
this.browserWrapper.style.top = `${initialY}px`;
this.browserWrapper.style.left = `${initialX}px`;
this.browserWrapper.style.width = `${initialWidth}px`;
this.browserWrapper.style.height = `${initialHeight}px`;
gZenUIManager.motion.animate(this.browserWrapper, {
top: [`${initialY}px`, '50%'],
left: [`${initialX}px`, '50%'],
width: [`${initialWidth}px`, '85%'],
height: [`${initialHeight}px`, '100%'],
opacity: [.8, 1],
}, {
duration: .5,
ease: "easeIn",
type: "spring",
bounce: 0.25
}).then(() => {
this.browserWrapper.removeAttribute('animate');
this.browserWrapper.setAttribute('animate-end', true);
this.browserWrapper.setAttribute('has-finished-animation', true);
this._animating = false;
this.animatingOpen = false;
}, 500);
});
});
}
@@ -286,6 +297,7 @@
this.animatingFullOpen = true;
this.currentParentTab._visuallySelected = false;
this.browserWrapper.removeAttribute('style');
this.browserWrapper.removeAttribute('has-finished-animation');
this.browserWrapper.setAttribute('animate-full', true);
this.#currentTab.removeAttribute('zen-glance-tab');