Use translateX instead of changing width

This commit is contained in:
Fedor Indutny 2022-11-10 18:45:52 -08:00 committed by GitHub
parent 94a23515e6
commit 709588a874
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 22 deletions

View file

@ -280,10 +280,9 @@
&--bar { &--bar {
background: $color-white; background: $color-white;
background-size: 200% 100%;
border-radius: 2px; border-radius: 2px;
display: block;
height: 100%; height: 100%;
transform: translateX(-100%);
} }
} }

View file

@ -284,12 +284,15 @@ export const StoryViewer = ({
); );
const target = progressBarRef.current; const target = progressBarRef.current;
const animation = target.animate([{ width: '0%' }, { width: '100%' }], { const animation = target.animate(
[{ transform: 'translateX(-100%)' }, { transform: 'translateX(0%)' }],
{
id: 'story-progress-bar', id: 'story-progress-bar',
duration: storyDuration, duration: storyDuration,
easing: 'linear', easing: 'linear',
fill: 'forwards', fill: 'forwards',
}); }
);
animationRef.current = animation; animationRef.current = animation;
@ -411,27 +414,41 @@ export const StoryViewer = ({
return; return;
} }
let lastMouseMove: number | undefined; let mouseMoveExpiration: number | undefined;
let timer: NodeJS.Timeout | undefined;
function updateLastMouseMove() { function updateLastMouseMove() {
lastMouseMove = Date.now(); mouseMoveExpiration = Date.now() + MOUSE_IDLE_TIME;
if (timer === undefined) {
checkMouseIdle();
}
} }
function checkMouseIdle() { function checkMouseIdle() {
requestAnimationFrame(() => { timer = undefined;
if (lastMouseMove && Date.now() - lastMouseMove > MOUSE_IDLE_TIME) {
if (mouseMoveExpiration === undefined) {
return;
}
const remaining = mouseMoveExpiration - Date.now();
if (remaining <= 0) {
setArrowToShow(Arrow.None); setArrowToShow(Arrow.None);
} else { return;
checkMouseIdle();
} }
});
timer = setTimeout(checkMouseIdle, remaining);
} }
checkMouseIdle();
document.addEventListener('mousemove', updateLastMouseMove); document.addEventListener('mousemove', updateLastMouseMove);
return () => { return () => {
lastMouseMove = undefined; if (timer !== undefined) {
clearTimeout(timer);
}
mouseMoveExpiration = undefined;
timer = undefined;
document.removeEventListener('mousemove', updateLastMouseMove); document.removeEventListener('mousemove', updateLastMouseMove);
}; };
}, [arrowToShow]); }, [arrowToShow]);
@ -723,9 +740,13 @@ export const StoryViewer = ({
) : ( ) : (
<div <div
className="StoryViewer__progress--bar" className="StoryViewer__progress--bar"
style={{ style={
width: currentIndex < index ? '0%' : '100%', currentIndex < index
}} ? {}
: {
transform: 'translateX(0%)',
}
}
/> />
)} )}
</div> </div>