如何实现.box2的平滑移出动画？悬停效果问题咨询

嘿，这个问题我之前也碰到过！核心问题在于默认的:hover状态切换时，离开的瞬间会直接重置样式，没有过渡动画。咱们分两种方案来解决，你可以根据自己的场景选：

方案一：纯CSS（推荐，结构更清晰） #

这个方案需要把.box1和.box2放在同一个父容器里，利用父容器的hover状态来控制.box2的显示/隐藏，这样鼠标移到.box2上时也不会误触发消失动画。

HTML结构 #

<div class="box-container">
  <div class="box1">我是box1，鼠标悬停我</div>
  <div class="box2">我是box2，会平滑出现和消失</div>
</div>

CSS样式 #

.box-container {
  position: relative;
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
}

.box1 {
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box2 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 初始状态：在容器底部外，完全透明 */
  transform: translateY(100%);
  opacity: 0;
  /* 设置过渡动画：transform和opacity都参与过渡 */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 父容器hover时，让.box2回到原位并显示 */
.box-container:hover .box2 {
  transform: translateY(0);
  opacity: 1;
}

原理说明：

• 初始时.box2通过transform: translateY(100%)把自己移出父容器底部，同时opacity:0隐藏
• 父容器hover时，.box2移动到原位并显示，过渡动画让这个过程平滑
• 鼠标离开父容器时，.box2会自动执行反向过渡：从原位向下移动（也就是你要的“从上到下消失”），同时逐渐透明，完美实现需求

方案二：JS辅助（适合不能修改HTML结构的场景） #

如果没办法给两个box加父容器，那可以用JS监听鼠标离开事件，给.box2添加消失动画，动画结束后再重置状态。

HTML结构 #

<div class="box1">我是box1，鼠标悬停我</div>
<div class="box2">我是box2，会平滑出现和消失</div>

CSS样式 #

.box1 {
  width: 200px;
  height: 100px;
  border: 1px solid #ccc;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box2 {
  width: 200px;
  height: 80px;
  background: #42b983;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 初始状态：隐藏在下方 */
  transform: translateY(100%);
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 显示状态 */
.box2.show {
  transform: translateY(0);
  opacity: 1;
}

JS代码 #

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');

// 鼠标悬停box1时，显示box2
box1.addEventListener('mouseenter', () => {
  box2.classList.add('show');
});

// 鼠标离开box1时，先移除show类触发消失动画，动画结束后重置状态
box1.addEventListener('mouseleave', () => {
  box2.classList.remove('show');
  // 监听动画结束，避免box2挡住鼠标事件
  box2.addEventListener('transitionend', () => {
    // 这里可以根据需要做额外处理，比如如果不需要保留位置可以加display:none
  }, { once: true }); // once:true确保只触发一次
});

注意：这个方案要注意鼠标从box1移到box2时，会触发box1的mouseleave，导致box2消失。如果需要支持鼠标移到box2上不消失，还是方案一更靠谱。

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