danog/telegram-tt
1
0
Fork 0
mirror of https://github.com/danog/telegram-tt.git synced 2025-01-21 21:01:29 +01:00
Code Issues 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(() => {
requestAnimationFrame(() => {
document.body.removeChild(ghost);
if (document.body.contains(ghost)) {
document.body.removeChild(ghost);
}
document.body.classList.remove('ghost-animating');
});
}, ANIMATION_DURATION + ANIMATION_END_DELAY);
@ -148,21 +150,50 @@ export function animateClosing(origin: MediaViewerOrigin, bestImageData: string,
}
}
const ghost = createGhost(bestImageData || toImage, origin === MediaViewerOrigin.ProfileAvatar);
applyStyles(ghost, {
top: `${toTop}px`,
left: `${toLeft}px`,
width: `${toWidth}px`,
height: `${toHeight}px`,
transform: `translate3d(${fromTranslateX}px, ${fromTranslateY}px, 0) scale(${fromScaleX}, ${fromScaleY})`,
});
const existingGhost = document.getElementsByClassName('ghost')[0] as HTMLDivElement;
const ghost = existingGhost || createGhost(bestImageData || toImage, origin === MediaViewerOrigin.ProfileAvatar);
if (!existingGhost) {
applyStyles(ghost, {
top: `${toTop}px`,
left: `${toLeft}px`,
width: `${toWidth}px`,
height: `${toHeight}px`,
transform: `translate3d(${fromTranslateX}px, ${fromTranslateY}px, 0) scale(${fromScaleX}, ${fromScaleY})`,
});
}
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.appendChild(ghost);
if (!existingGhost) document.body.appendChild(ghost);
requestAnimationFrame(() => {
if (existingGhost) {
existingGhost.style.transition = '';
}
ghost.style.transform = '';
if (shouldFadeOut) {
ghost.style.opacity = '0';
}
@ -171,7 +202,9 @@ export function animateClosing(origin: MediaViewerOrigin, bestImageData: string,
setTimeout(() => {
requestAnimationFrame(() => {
document.body.removeChild(ghost);
if (document.body.contains(ghost)) {
document.body.removeChild(ghost);
}
document.body.classList.remove('ghost-animating');
});
}, ANIMATION_DURATION + ANIMATION_END_DELAY);