display:block状态下Hover过渡效果失效问题排查

你这问题我太熟了——核心原因是CSS transition 压根不支持对 display 属性的变化做过渡动画。当你在 hover 时把 .social-container 的 display 从 none 切到 block，这个过程是瞬间完成的，直接把 opacity 的过渡给打断了，自然看不到动画效果。

给你个可行的解决方案：放弃用 display 控制显示隐藏，改用 visibility + opacity 的组合。visibility: hidden 会让元素不可见但仍保留它的布局空间，配合 opacity: 0 实现完全隐藏的视觉效果；hover 时切换成 visibility: visible 和 opacity: 1，这样过渡动画就能正常触发了。

修改后的完整代码如下：

<div class="do-share">
  <ul class="social-container">
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

/* 给父元素设置相对定位，确保子元素绝对定位的参考正确 */
.do-share {
  position: relative;
}

.do-share:hover > .social-container {
  opacity: 1;
  visibility: visible;
  position: absolute;
  right: 0;
  list-style: none;
  margin: 0;
  top: -85px;
}

.social-container {
  visibility: hidden;
  opacity: 0;
  transition: all 2s linear;
}

额外提醒一下：绝对定位的元素必须有一个设置了 position: relative 的父级（也就是这里的 .do-share），不然它会相对于整个页面定位，很可能跑到你预期之外的位置。

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