Glide.js父容器隐藏后显示时渲染异常，如何强制重绘？

直接调用Glide实例的refresh()方法即可，这个方法会重新计算滑块尺寸、触发完整的渲染流程，和浏览器窗口resize时自动执行的逻辑完全一致。

具体操作步骤 #

• 获取Glide实例
  如果你是手动初始化的Glide，记得保留实例引用：

  // 初始化并保存实例
  const glide = new Glide('.glide', {
    // 你的自定义配置
  }).mount();
  

  如果是通过data-glide属性自动初始化的，用Glide.find()获取实例：

  const glide = Glide.find('.glide');
  

• 显示父容器后触发刷新
  在你修改父容器样式使其显示的代码执行完成后，立即调用refresh()：

  // 显示父容器的代码
  const parentContainer = document.querySelector('.your-parent-selector');
  parentContainer.style.display = 'block';
  parentContainer.style.visibility = 'visible';
  
  // 强制Glide重新渲染
  glide.refresh();
  

• 框架环境适配
  若在Vue、React等框架中使用，需确保DOM更新完成后再调用方法：

  • Vue：用$nextTick确保DOM已更新

    this.$nextTick(() => {
      glide.refresh();
    });
    

  • React：依赖父容器显示状态的useEffect

    useEffect(() => {
      if (parentIsVisible) {
        glide.refresh();
      }
    }, [parentIsVisible]);
    

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