### [导航展开收起动画不触发：挂错了对象](https://www.huociguo.com/article/1636)

**Published:** 2026-10-01T13:14:39

**Author:** 米了

**Excerpt:** 点击收起时没有动画，展开却有。一类原因是收起操作直接把元素隐藏，动画还没播完元素就消失；另一类原因是动画挂在父…

点击收起时没有动画，展开却有。一类原因是收起操作直接把元素隐藏，动画还没播完元素就消失；另一类原因是动画挂在父容器上，而实际位移发生在子列表。

![屏幕上显示的网页开发代码](https://api.huociguo.com/wp-content/uploads/2026/10/e6.jpg)

动画对象与状态切换时机是两个关键点

## 结构

```
<nav class='mobile-nav'>
  <ul class='nav-list'>...</ul>
</nav>
```

动画应作用在子列表上。挂在导航容器上时，容器高度由内容决定，位移看不出变化。

## 写法

```
.nav-list { transform: translateY(-8px); opacity: 0; }
.mobile-nav.is-open .nav-list { animation: slide-in 240ms ease forwards; }
.mobile-nav.is-closing .nav-list { animation: slide-out 200ms ease forwards; }
@keyframes slide-in { to { transform: none; opacity: 1; } }
@keyframes slide-out { to { transform: translateY(-8px); opacity: 0; } }
```

## 收起为什么看不到

直接移除展开类会立刻回到初始态，收起动画没有机会播放。做法是增加一个收起状态类，等动画结束事件触发后再移除。

```
nav.addEventListener('animationend', () => {
  if (nav.classList.contains('is-closing')) {
    nav.classList.remove('is-closing', 'is-open');
  }
});
```

## 注意点

-   两个方向的动画分别定义，不要用同一组关键帧反向播放，时长曲线对不上。
-   初始状态写在基础选择器里，避免动画结束后样式跳回。
-   位移用 transform，不对 height 做动画，后者会触发布局计算。
-   尊重系统的减少动效偏好，用媒体查询关闭动画。

**Tags:** animation属性, CSS动画, transform动画, 收起动画, 移动端导航

**Categories:** HTML5

---