React排序可视化动画后屏幕闪烁问题求助（Web Animations API）

背景 #

使用Web Animations API（原生JavaScript）实现div元素水平平移，用于可视化排序算法，同时通过React的JSX管理元素渲染。

问题描述 #

元素交换动画完成后、更新排序后元素的useState状态前，出现屏幕闪烁。由于React无原生支持该场景的动画能力，临时方案是动画结束后反转/取消动画，快速将元素恢复到React管理的初始位置再调用setState，但仍存在原未排序状态间歇性闪烁、元素偶尔偏移屏幕的问题。

代码实现 #

动画代码 #

let previousAnimation = Promise.resolve();
for (const animation of swapAnimations) {
    // 省略计算leftBlock和rightBlock的代码 [...]

    previousAnimation = Promise.all([previousAnimation]).then(() => {
        // 动画时序配置
        const timing = {
            duration: 1000,
            fill: "forwards",
        };

        // 左侧元素向右移动的关键帧
        const leftMove = [
            {transform: `translateX(${LEFT_POSITION}px)`, offset: 0.0},
            {transform: `translateX(${RIGHT_POSITION}px)`, offset: 1.0}
        ];

        // 右侧元素向左移动的关键帧
        const rightMove = [
            {transform: `translateX(${RIGHT_POSITION}px)`, offset: 0.0},
            {transform: `translateX(${LEFT_POSITION}px)`, offset: 1.0}
        ];

        // 执行动画
        const leftAnimation = leftBlock.animate(leftMove, timing);
        const rightAnimation = rightBlock.animate(rightMove, timing);

        // 链式执行动画：当前动画对完成后再启动下一组
        return Promise.all([leftAnimation.finished, rightAnimation.finished]);
    }).catch((reason) => console.log(new Error(reason)));
}

恢复React状态的临时方案 #

// 位于上述循环外部
previousAnimation = previousAnimation.then(() => {
    for (const block of blocks) {
        // 恢复元素初始位置
        const restoreAnimation = block.animate({
            transform: `translateX(0)`,
        }, {
            // 尝试修复闪屏的配置项
            duration: 0,
            fill: "forwards",
            easing: "step-end",
            delay: 1
        });
        restoreAnimation.finished.then(() => {
            // 尝试取消所有已完成的动画
            block.getAnimations().forEach((animation) => animation.cancel());
        });

        // sortedBlocks为预先计算好的排序后元素数组
        // 尝试过将该行代码放在恢复代码之前、之中、之后，闪屏问题仍存在
        setBlocks(sortedBlocks);
    }
});

已尝试的解决方案 #

• 时序调整：通过KeyframeEffect参数设置极快的恢复动画，闪屏问题依旧；
• React Transition Group：仅支持DOM元素的进入/退出动画，不适用于已有元素的排序动画场景；
• 第三方React动画库（如React Spring、Framer Motion）：暂不想引入第三方依赖，且不确定是否适配当前场景；
• Window.requestAnimationFrame()：属于非React原生实现，推测仍会存在DOM渲染冲突问题；
• 将动画元素移出React DOM树：方案可行，但更倾向于使用React原生方案实现。

更新说明 #

已排除CSS过渡/动画方案，因为动画基于动态计算的元素位置，无法转化为有限的CSS类。

核心诉求 #

解决因动画结束后快速恢复DOM以同步React状态，导致的屏幕闪烁问题，要求方案尽量不引入第三方依赖，优先React原生实现。

内容的提问来源于stack exchange，提问作者enell