Skeleton动画在内容加载完成后为什么会突然消失而不是平滑过渡？

皇甫含平提问于 2026-01-25 16:51:29 阅读 40

组件

我在用Skeleton动画做加载占位时遇到个问题，动画骨架在真实内容加载出来后直接消失了，没有之前设置的0.3秒渐隐效果。我检查过CSS过渡属性明明写对了，代码是这样的：



  


  // 数据加载完成后
  document.querySelector('.skeleton').style.opacity = 0;
  setTimeout(() => {
    document.querySelector('.skeleton').style.display = 'none';
  }, 300);

虽然加了setTimeout等了300ms，但实际效果还是感觉突兀。是不是display:none触发了布局重置？或者应该用别的方式控制显隐？试过把display改成visibility也不行…

我来解答赞 7 收藏

反馈

2 条解答

UE丶淑怡 Lv1

你这写法确实会突兀。opacity 是改了，但你这 JS 是同步改的，浏览器根本没来得及做动画就被你直接设成 0 了。

要让 CSS 过渡生效，得先让元素处于一个可见状态，再触发样式变化。你现在是直接就设成 opacity: 0，浏览器一看：哦你一开始就不要我显示了，那我还过渡个锤子。

你可以这样改：

const skeleton = document.querySelector('.skeleton');



// 等数据加载完再触发隐藏动画

skeleton.classList.add('fade-out');



skeleton.addEventListener('transitionend', () => {

  skeleton.style.display = 'none';

});

然后你的 CSS 要加个 fade-out 类：

.skeleton {

  opacity: 1;

  transition: opacity 0.3s ease;

}



.skeleton.fade-out {

  opacity: 0;

}

这样浏览器就会从 opacity: 1 平滑过渡到 0，等动画播完再用 display: none 隐藏就不会突兀了。

拿去改改，有问题再来找我。

2026-02-04 12:24

UX晓娜 Lv1

你这个问题挺常见的，display:none确实会直接把元素从布局中移除，导致过渡效果失效。建议用visibility:hidden配合opacity来实现平滑过渡，但只改这一个可能还不够。

试试下面这个方案，我之前用过，复制过去试试：

// 数据加载完成后

document.querySelector('.skeleton').style.opacity = 0;

setTimeout(() => {

  document.querySelector('.skeleton').style.visibility = 'hidden';

}, 300);



// 同时确保CSS中有过渡效果

.skeleton {

  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;

}

关键是visibility和opacity一起用，这样既能保持布局不塌，又能有渐隐效果。如果还是不行，可能是其他地方的CSS冲突了，检查下有没有覆盖掉transition属性。

2026-01-28 17:55