Prevent more animations when animations are turned off
This commit is contained in:
parent
aa3a02a4d5
commit
4180e58f3b
@ -6,7 +6,7 @@
|
|||||||
height: 0 !important;
|
height: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
body.animation-level-0 {
|
body.animation-level-0 & {
|
||||||
transition: none !important;
|
transition: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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)
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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);
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user