Skeleton骨架屏切换时为什么会突然跳动？布局如何平滑过渡？

这个问题我之前也踩过坑，当时被这个闪烁和跳动的问题折磨了好久。其实问题的根本原因不只是宽高和padding的差异，还涉及到字体渲染、行高这些细节。

我的解决方案是这样的：首先确保骨架屏和真实内容的盒模型完全一致，不只是宽高和padding，还要注意border、margin，尤其是line-height。我当时发现即使宽高一样，文字内容渲染时因为行高的关系还是会撑开容器。

然后重点来了，要用CSS的opacity和transition来做平滑过渡。把骨架屏和真实内容都放在同一个容器里，通过透明度切换显示状态，而不是直接移除DOM节点。具体代码可以这样写：

const [isLoading, setLoading] = useState(true);



useEffect(() => {

  setTimeout(() => {

    setLoading(false);

  }, 1500);

}, []);



return (

  <div className="content-container">

    <div className={skeleton-wrapper ${isLoading ? 'active' : ''}}>

      <div className="skeleton-post"></div>

    </div>

    <div className={content-wrapper ${isLoading ? '' : 'active'}}>

      <h2>{title}</h2>

      <p>{content}</p>

    </div>

  </div>

);

对应的CSS样式要这么写：

.content-container {

  position: relative;

}



.skeleton-wrapper,

.content-wrapper {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  transition: opacity 0.3s ease-in-out;

}



.skeleton-wrapper { 

  opacity: 1;

  background: #eee;

}



.content-wrapper {

  opacity: 0;

}



.skeleton-wrapper.active {

  opacity: 1;

}



.content-wrapper.active {

  opacity: 1;

}

这里的关键点是用绝对定位让两个容器重叠，然后通过opacity控制显隐。transition负责平滑过渡效果，0.3秒的过渡时间比较自然。

最后要注意的是，记得给骨架屏设置和真实内容相同的字体大小、行高等样式。我当时就是因为忽略了行高，导致切换时高度还是会有跳动。

这样做完之后，整个切换过程就会非常平滑，不会有闪烁和跳动的情况了。

这个问题我之前也踩过坑，根本原因是骨架屏和真实内容在切换时触发了重排（reflow），尤其是文字渲染导致的高度计算差异。即使你把宽高 padding 都设成一样，浏览器渲染文本时还是会因为字体加载、行高、字间距这些细节产生微小变化，导致布局突然跳动。

最有效的解决办法是给骨架屏和真实内容都套一个固定尺寸的容器，并且这个容器要有明确的 height 和 overflow: hidden。这样就算内部内容高度有波动，外部容器也不会抖动。

另外建议用 visibility 或 opacity 来做渐变过渡，而不是直接替换元素。你可以让骨架屏淡出，真实内容淡入，视觉上就会平滑很多。

代码可以这样改：

const [isLoading, setLoading] = useState(true);



useEffect(() => {

  setTimeout(() => {

    setLoading(false);

  }, 1500);

}, []);



return (

  


    

      className={skeleton-container ${isLoading ? 'visible' : 'hidden'}}

    >

      


    


    

      className={post-container ${!isLoading ? 'visible' : 'hidden'}}

    >

      
{title}


      
{content}


    


  


);

对应的 CSS 加上：

.content-wrapper {

  position: relative;

  height: 200px; /* 设一个固定高度，根据实际内容调整 */

  overflow: hidden;

}



.skeleton-container,

.post-container {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  transition: opacity 0.3s ease;

}



.visible {

  opacity: 1;

  visibility: visible;

}



.hidden {

  opacity: 0;

  visibility: hidden;

}

关键是 content-wrapper 定高 + 绝对定位让两个状态层叠，再用 opacity 过渡，就能避免闪动。顺便提一句，Skeleton 元素本身最好也用 block 的 div 模拟文本行，别用空的 div，否则宽度不一致也会跳。

希望能帮到你，这种细节确实容易忽略，但一旦加上就顺滑多了。