ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Media Viewer: Fix animation glitches when closing (#1102)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-05-24 00:28:05 +03:00
parent 45a5dcf952
commit 1f56cc1af6
1 changed files with 44 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/mediaViewer/helpers/ghostAnimation.ts
View File

@ -88,7 +88,9 @@ export function animateOpening(
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
document.body.removeChild(ghost); if (document.body.contains(ghost)) {
document.body.removeChild(ghost);
}
document.body.classList.remove('ghost-animating'); document.body.classList.remove('ghost-animating');
}); });
}, ANIMATION_DURATION + ANIMATION_END_DELAY); }, ANIMATION_DURATION + ANIMATION_END_DELAY);
@ -148,21 +150,50 @@ export function animateClosing(origin: MediaViewerOrigin, bestImageData: string,
} }
} }
const ghost = createGhost(bestImageData || toImage, origin === MediaViewerOrigin.ProfileAvatar); const existingGhost = document.getElementsByClassName('ghost')[0] as HTMLDivElement;
applyStyles(ghost, {
top: `${toTop}px`, const ghost = existingGhost || createGhost(bestImageData || toImage, origin === MediaViewerOrigin.ProfileAvatar);
left: `${toLeft}px`, if (!existingGhost) {
width: `${toWidth}px`, applyStyles(ghost, {
height: `${toHeight}px`, top: `${toTop}px`,
transform: `translate3d(${fromTranslateX}px, ${fromTranslateY}px, 0) scale(${fromScaleX}, ${fromScaleY})`, left: `${toLeft}px`,
}); width: `${toWidth}px`,
height: `${toHeight}px`,
transform: `translate3d(${fromTranslateX}px, ${fromTranslateY}px, 0) scale(${fromScaleX}, ${fromScaleY})`,
});
}
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (existingGhost) {
const {
top,
left,
width,
height,
} = existingGhost.getBoundingClientRect();
const scaleX = width / toWidth;
const scaleY = height / toHeight;
applyStyles(ghost, {
transition: 'none',
top: `${toTop}px`,
left: `${toLeft}px`,
transformOrigin: 'top left',
transform: `translate3d(${left - toLeft}px, ${top - toTop}px, 0) scale(${scaleX}, ${scaleY})`,
width: `${toWidth}px`,
height: `${toHeight}px`,
});
}
document.body.classList.add('ghost-animating'); document.body.classList.add('ghost-animating');
document.body.appendChild(ghost); if (!existingGhost) document.body.appendChild(ghost);
requestAnimationFrame(() => { requestAnimationFrame(() => {
if (existingGhost) {
existingGhost.style.transition = '';
}
ghost.style.transform = ''; ghost.style.transform = '';
if (shouldFadeOut) { if (shouldFadeOut) {
ghost.style.opacity = '0'; ghost.style.opacity = '0';
} }
@ -171,7 +202,9 @@ export function animateClosing(origin: MediaViewerOrigin, bestImageData: string,
setTimeout(() => { setTimeout(() => {
requestAnimationFrame(() => { requestAnimationFrame(() => {
document.body.removeChild(ghost); if (document.body.contains(ghost)) {
document.body.removeChild(ghost);
}
document.body.classList.remove('ghost-animating'); document.body.classList.remove('ghost-animating');
}); });
}, ANIMATION_DURATION + ANIMATION_END_DELAY); }, ANIMATION_DURATION + ANIMATION_END_DELAY);