这个问题可能是由于过渡造成的 DOM 重绘导致的。我们可以尝试在过渡开始时先将网格隐藏起来,在过渡结束后再将其显示出来。可以在过渡前后添加 beforeLeave
和 afterEnter
函数来实现此功能。下面是一个可能的示例代码:
const hideMeshes = () => {
// 将网格隐藏
// ...
};
const showMeshes = () => {
// 将网格显示
// ...
};
const router = new Barba.Router();
router.transitionService.onBefore({ name: 'fade' }, hideMeshes);
router.transitionService.onAfter({ name: 'fade' }, showMeshes);
在此示例中,我们使用了名为 "fade" 的过渡,您可以根据自己的需要更改为其他过渡名称。hideMeshes()
和 showMeshes()
函数中的代码应根据您的需求更改。
请注意,此解法仅适用于使用 WebGL 等技术来呈现的网格,而不适用于常规 HTML 元素。