悬停父元素.red时触发子元素.blue显示过渡的SCSS实现问题求助

核心原因 #

CSS transition 无法对display属性生效，display属于离散状态属性，不存在none到block的中间过渡帧，因此直接切换display无法实现平滑动画。

修复方案 #

使用opacity+visibility组合替代display实现显隐控制：

• 隐藏状态设置opacity: 0、visibility: hidden：元素完全透明，且不响应鼠标交互，效果接近display: none
• 显示状态设置opacity: 1、visibility: visible：两个属性均支持过渡，可实现1秒平滑切换

同时修正原代码中.app的height属性拼写错误。

修正后完整SCSS代码 #

.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .red {
    position: relative;
    background-color: red;
    height: 30rem;
    width: 30rem;
    &:hover {
      .blue {
        opacity: 1;
        visibility: visible;
      }
    }
    .blue {
      opacity: 0;
      visibility: hidden;
      height: 10rem;
      width: 10rem;
      position: absolute;
      background-color: blue;
      transition: all 1s;
    }
  }
}

可选优化 #

如果需要更丰富的入场效果，可额外添加位移属性实现从下往上滑入的效果：

.blue {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  /* 其余原有属性不变 */
  transition: all 1s;
}

.red:hover .blue {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

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