mirror of
https://github.com/zen-browser/desktop.git
synced 2025-10-06 18:06:35 +00:00
Add motion animation support and refine UI transitions for workspace interactions
This commit is contained in:
@@ -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');
|
||||
|
Reference in New Issue
Block a user