如何在鼠标离开div区域时触发动画实现菜单收起？

首选方案：使用Transition替代@keyframes #

对于简单的高度展开/收起，transition比@keyframes更直观，它能自动处理hover状态的双向过渡，不需要额外写反向动画。

代码示例 #

HTML

<nav class="top-nav">
  <button class="menu-btn">展开菜单</button>
  <div class="dropdown">
    <ul>
      <li><a href="#">菜单项1</a></li>
      <li><a href="#">菜单项2</a></li>
      <li><a href="#">菜单项3</a></li>
    </ul>
  </div>
</nav>

CSS

.top-nav {
  position: relative;
}

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 0;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid #ddd;
  transition: height 0.3s ease-in-out; /* 核心：添加过渡属性 */
}

.top-nav:hover .dropdown {
  height: 180px; /* hover时设置目标高度 */
}

如果菜单内容高度不固定，可以用max-height替代height——初始设max-height: 0，hover时设max-height: 600px（选一个足够容纳内容的值），适配动态内容更灵活。

备选方案：修正@keyframes实现双向动画 #

如果一定要用@keyframes，需要给鼠标离开状态添加反向动画，并通过animation-fill-mode保持动画结束后的状态：

代码示例 #

CSS

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  height: 0;
  overflow: hidden;
  background: #f5f5f5;
  border: 1px solid #ddd;
  animation-fill-mode: forwards; /* 让动画停在最后一帧 */
}

/* 展开动画 */
.top-nav:hover .dropdown {
  animation: expandMenu 0.3s forwards;
}

/* 收起动画 */
.top-nav:not(:hover) .dropdown {
  animation: collapseMenu 0.3s forwards;
}

@keyframes expandMenu {
  0% { height: 0; }
  100% { height: 180px; }
}

@keyframes collapseMenu {
  0% { height: 180px; }
  100% { height: 0; }
}

关键注意点 #

• 不要同时混用transition和@keyframes，两者会相互冲突导致动画异常。
• 必须给菜单设置overflow: hidden，否则高度变化时内容会溢出显示，破坏收起效果。
• 确保给父元素设置了position: relative，保证下拉菜单的定位正确。

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