如何让仿亚马逊垂直分类菜单仅首次触发过渡动画？

我明白你的需求——首次展开分类菜单时展示过渡动画，之后再hover展开就直接显示，不再有动画效果。当前你的CSS给.category_info_part设置了全局的transition属性，所以每次hover都会触发动画，我们可以通过JS配合CSS类来实现这个需求。

解决方案步骤： #

1. 添加禁用过渡的CSS类
   首先新增一个类，用来覆盖元素的过渡属性，让后续hover不再有动画：

#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_info_part.no-transition {
  transition: none !important;
}

2. 用JavaScript监听首次hover事件
   我们需要给每个分类列表项绑定一个仅执行一次的hover事件，在首次动画完成后给对应的.category_info_part添加上面的禁用类：

// 获取所有分类列表项
const categoryItems = document.querySelectorAll('#header .header_section .header_content .header_right_part .search_bar_part .category_part .category_main_box .category_left_list > ul > li');

categoryItems.forEach(item => {
  // 绑定mouseenter事件，设置once: true确保只触发一次
  item.addEventListener('mouseenter', function() {
    const infoPart = this.querySelector('.category_info_part');
    if (!infoPart) return;

    // 监听过渡结束事件，确保第一次动画完整执行后再添加禁用类
    infoPart.addEventListener('transitionend', function addNoTransition() {
      this.classList.add('no-transition');
      // 移除该事件监听，避免重复触发
      this.removeEventListener('transitionend', addNoTransition);
    });
  }, { once: true });
});

原理说明： #

• 首次hover分类项时，.category_info_part还没有.no-transition类，所以会按照你原来的CSS执行过渡动画。
• 当过渡动画完成后，transitionend事件触发，给元素添加.no-transition类，此时元素的transition属性被覆盖为none。
• 后续再hover该分类项时，因为.no-transition类的存在，width和visibility的变化不会有过渡效果，直接完成状态切换。

如果你担心transitionend事件可能因为某些情况不触发（比如快速移出再移入），也可以用setTimeout替代，时间和你的transition-duration保持一致（0.5秒=500毫秒）：

// 替换transitionend的写法
setTimeout(() => {
  infoPart.classList.add('no-transition');
}, 500);

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