Prevent more animations when animations are turned off

This commit is contained in:
Alexander Zinchuk 2021-07-08 18:00:41 +03:00
parent aa3a02a4d5
commit 4180e58f3b
4 changed files with 40 additions and 7 deletions

View File

@ -6,7 +6,7 @@
height: 0 !important;
}
body.animation-level-0 {
body.animation-level-0 & {
transition: none !important;
}

View File

@ -2,6 +2,10 @@
height: 2.625rem;
transition: height 150ms ease-out, opacity 150ms ease-out;
body.animation-level-0 & {
transition: none !important;
}
&:not(.open) {
height: 0 !important;
}

View File

@ -1,5 +1,8 @@
import { getGlobal } from '../lib/teact/teactn';
import { FocusDirection } from '../types';
import { ANIMATION_LEVEL_MIN } from '../config';
import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck';
import { fastRaf } from './schedulers';
import { animateSingle } from './animation';
@ -50,6 +53,10 @@ export default function fastSmoothScroll(
container.scrollTop = Math.max(0, offsetTop - maxDistance);
}
if (getGlobal().settings.byKey.animationLevel === ANIMATION_LEVEL_MIN) {
forceDuration = 0;
}
isAnimating = true;
fastRaf(() => {
scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight);
@ -102,6 +109,12 @@ function scrollWithJs(
}
const target = container.scrollTop + path;
if (forceDuration === 0) {
container.scrollTop = target;
return;
}
const duration = forceDuration || (
MIN_JS_DURATION + (Math.abs(path) / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION)
);

View File

@ -1,21 +1,31 @@
import { getGlobal } from '../lib/teact/teactn';
import { fastRaf } from './schedulers';
import { animate } from './animation';
import { IS_IOS } from './environment';
import { ANIMATION_LEVEL_MIN } from '../config';
const DURATION = 300;
const DEFAULT_DURATION = 300;
export default function fastSmoothScrollHorizontal(container: HTMLElement, left: number, duration = DEFAULT_DURATION) {
if (getGlobal().settings.byKey.animationLevel === ANIMATION_LEVEL_MIN) {
duration = 0;
}
export default function fastSmoothScrollHorizontal(container: HTMLElement, left: number) {
// Native way seems to be smoother in Chrome
if (!IS_IOS) {
container.scrollTo({ left, behavior: 'smooth' });
container.scrollTo({
left,
...(duration && { behavior: 'smooth' }),
});
} else {
fastRaf(() => {
scrollWithJs(container, left);
scrollWithJs(container, left, duration);
});
}
}
function scrollWithJs(container: HTMLElement, left: number) {
function scrollWithJs(container: HTMLElement, left: number, duration: number) {
const { scrollLeft, offsetWidth: containerWidth, scrollWidth } = container;
let path = left - scrollLeft;
@ -28,10 +38,16 @@ function scrollWithJs(container: HTMLElement, left: number) {
}
const target = container.scrollLeft + path;
if (duration === 0) {
container.scrollTop = target;
return;
}
const startAt = Date.now();
animate(() => {
const t = Math.min((Date.now() - startAt) / DURATION, 1);
const t = Math.min((Date.now() - startAt) / duration, 1);
const currentPath = path * (1 - transition(t));
container.scrollLeft = Math.round(target - currentPath);