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; height: 0 !important;
} }
body.animation-level-0 { body.animation-level-0 & {
transition: none !important; transition: none !important;
} }

View File

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

View File

@ -1,5 +1,8 @@
import { getGlobal } from '../lib/teact/teactn';
import { FocusDirection } from '../types'; import { FocusDirection } from '../types';
import { ANIMATION_LEVEL_MIN } from '../config';
import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck'; import { dispatchHeavyAnimationEvent } from '../hooks/useHeavyAnimationCheck';
import { fastRaf } from './schedulers'; import { fastRaf } from './schedulers';
import { animateSingle } from './animation'; import { animateSingle } from './animation';
@ -50,6 +53,10 @@ export default function fastSmoothScroll(
container.scrollTop = Math.max(0, offsetTop - maxDistance); container.scrollTop = Math.max(0, offsetTop - maxDistance);
} }
if (getGlobal().settings.byKey.animationLevel === ANIMATION_LEVEL_MIN) {
forceDuration = 0;
}
isAnimating = true; isAnimating = true;
fastRaf(() => { fastRaf(() => {
scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight); scrollWithJs(container, element, position, margin, forceDuration, forceCurrentContainerHeight);
@ -102,6 +109,12 @@ function scrollWithJs(
} }
const target = container.scrollTop + path; const target = container.scrollTop + path;
if (forceDuration === 0) {
container.scrollTop = target;
return;
}
const duration = forceDuration || ( const duration = forceDuration || (
MIN_JS_DURATION + (Math.abs(path) / MAX_DISTANCE) * (MAX_JS_DURATION - MIN_JS_DURATION) 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 { fastRaf } from './schedulers';
import { animate } from './animation'; import { animate } from './animation';
import { IS_IOS } from './environment'; 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 // Native way seems to be smoother in Chrome
if (!IS_IOS) { if (!IS_IOS) {
container.scrollTo({ left, behavior: 'smooth' }); container.scrollTo({
left,
...(duration && { behavior: 'smooth' }),
});
} else { } else {
fastRaf(() => { 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; const { scrollLeft, offsetWidth: containerWidth, scrollWidth } = container;
let path = left - scrollLeft; let path = left - scrollLeft;
@ -28,10 +38,16 @@ function scrollWithJs(container: HTMLElement, left: number) {
} }
const target = container.scrollLeft + path; const target = container.scrollLeft + path;
if (duration === 0) {
container.scrollTop = target;
return;
}
const startAt = Date.now(); const startAt = Date.now();
animate(() => { 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)); const currentPath = path * (1 - transition(t));
container.scrollLeft = Math.round(target - currentPath); container.scrollLeft = Math.round(target - currentPath);