父元素悬停时子元素滑出动画无过渡效果问题求助

我明白你的需求啦！你遇到的核心问题是 display 属性的切换无法触发 CSS 过渡动画，而且初始状态的设置也没到位，导致直接跳变。咱们一步步来修复：

问题诊断 #

1. display: none → display: block 是瞬时切换，CSS transition 对 display 属性完全不起作用，所以没有平滑效果。
2. 你没有给 .popout 设置初始的 transform 值，过渡动画缺少“起点”，就算去掉 display: none 也不会有平滑移动。
3. 没控制初始状态下的可见范围，容易在按钮左侧露出蓝色背景或文本。

修改后的完整代码 #

CSS #

.button { 
  position: relative; /* 让子元素.popout相对它定位 */
  display: inline-flex; /* 避免按钮占满整行，更符合按钮的布局逻辑 */
  align-items: center; /* 让图标和描述框垂直居中对齐 */
  padding: 7px; 
  margin: 20px; 
  background-color: red;
  overflow: hidden; /* 隐藏超出按钮范围的内容，防止左侧露出蓝色背景 */
} 

.button > .popout { 
  position: absolute; 
  left: 0; 
  padding: 2px 8px; /* 增加左右内边距，让文本更美观 */
  background-color: blue; 
  color: white; 
  /* 指定过渡的属性和时长，ease让动画更自然 */
  transition: transform 0.3s ease, opacity 0.3s ease; 
  transform: translateX(-100%); /* 初始时向左完全移出按钮范围 */
  opacity: 0; /* 初始透明，完全不可见 */
} 

.button:hover > .popout { 
  /* 向右移动到按钮右侧，calc(100%)是按钮的宽度，加8px是和图标之间的间距 */
  transform: translateX(calc(100% + 8px)); 
  opacity: 1; /* 完全显示 */
}

HTML（保留原结构即可，也可以给图标加个小样式让它更明显） #

<div class="button"> 
  <div class="icon"> O </div> 
  <div class="popout"> email </div> 
</div>

关键修改点说明 #

• 移除了 display: none，改用 opacity: 0 和 transform: translateX(-100%) 让描述框初始时“存在但不可见”，这样 CSS 过渡才能生效。
• 给 .button 添加 overflow: hidden，确保初始状态下描述框的蓝色背景不会在按钮左侧露出来。
• hover 时通过 transform 让描述框平滑滑到图标右侧，同时配合 opacity 实现淡入效果，动画更自然。
• 如果想要调整滑出的距离或动画时长，直接修改 transform 里的数值或 transition 里的时长即可。

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