Tab List: Fix quickly switching tabs (#1391)
This commit is contained in:
parent
2a1fc61fa7
commit
974b66e1f5
@ -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 {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user