Tab List: Fix quickly switching tabs (#1391)

This commit is contained in:
Alexander Zinchuk 2021-08-16 20:41:49 +03:00
parent 2a1fc61fa7
commit 974b66e1f5

View File

@ -51,6 +51,7 @@ const Transition: FC<OwnProps> = ({
}) => { }) => {
// No need for a container to update on change // No need for a container to update on change
const { animationLevel } = getGlobal().settings.byKey; const { animationLevel } = getGlobal().settings.byKey;
const currentIndexRef = useRef<number>();
// eslint-disable-next-line no-null/no-null // eslint-disable-next-line no-null/no-null
let containerRef = useRef<HTMLDivElement>(null); let containerRef = useRef<HTMLDivElement>(null);
@ -145,6 +146,8 @@ const Transition: FC<OwnProps> = ({
} }
function onAnimationEnd() { function onAnimationEnd() {
if (activeIndex !== currentIndexRef.current) return;
requestAnimationFrame(() => { requestAnimationFrame(() => {
container.classList.remove('animating', 'backwards'); container.classList.remove('animating', 'backwards');
@ -180,6 +183,8 @@ const Transition: FC<OwnProps> = ({
? childNodes[activeIndex] && childNodes[activeIndex].firstChild ? childNodes[activeIndex] && childNodes[activeIndex].firstChild
: childNodes[activeIndex]; : childNodes[activeIndex];
currentIndexRef.current = activeKey;
if (animationLevel > 0 && toNode) { if (animationLevel > 0 && toNode) {
waitForAnimationEnd(toNode, onAnimationEnd); waitForAnimationEnd(toNode, onAnimationEnd);
} else { } else {