通过JavaScript触发CSS Transitions无效果的问题排查

你的问题出在元素从display: none切换到display: flex时，浏览器会一次性合并所有样式变更，不会触发top属性的过渡动画。因为display: none状态下元素完全不参与页面渲染，没有初始的top值可以作为过渡起点，浏览器会直接应用最终的top: 90px状态，跳过过渡过程。

解决方法一：用visibility+opacity替代display: none（推荐） #

这种方式保持元素在DOM中始终渲染，只是通过透明度和可见性控制显示隐藏，能正常触发过渡：

修改后的CSS：

.search-bar {
  /* 替换display: none */
  visibility: hidden;
  opacity: 0;
  background-color: #000;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 5px;
  z-index: 1000;
  margin: 0 auto;
  /* 同时过渡top、opacity和visibility */
  transition: top 2s ease-in, opacity 0.3s ease, visibility 0.3s ease;
}

.search-bar-open {
  top: 90px;
  visibility: visible;
  opacity: 1;
}

修改后的JS：

let isSearchBarOpen = false;

function toggleSearchBar() {
  if (isSearchBarOpen) {
    searchBar.classList.remove("search-bar-open");
  } else {
    searchBar.classList.add("search-bar-open");
  }
  isSearchBarOpen = !isSearchBarOpen;

  toggleSearchIcon();
}

解决方法二：延迟添加类，让浏览器先完成渲染 #

如果一定要用display控制，可以用requestAnimationFrame把添加类的操作延迟到下一帧，让浏览器先处理display: flex的渲染，再触发过渡：

修改后的JS：

let isSearchBarOpen = false;

function toggleSearchBar() {
  if (isSearchBarOpen) {
    searchBar.style.display = "none";
    searchBar.classList.remove("search-bar-open");
  } else {
    searchBar.style.display = "flex";
    // 延迟到下一帧添加类
    requestAnimationFrame(() => {
      searchBar.classList.add("search-bar-open");
    });
  }
  isSearchBarOpen = !isSearchBarOpen;

  toggleSearchIcon();
}

原理说明 #

浏览器会在当前JS执行完成后，一次性计算并应用所有样式变更（重排重绘）。当你在同一代码块中同时设置display: flex和添加search-bar-open类时，浏览器会直接计算出元素最终的状态（display: flex+top:90px），不会识别到top属性从0到90px的变化过程，因此不会触发过渡动画。

使用requestAnimationFrame可以将添加类的操作放到浏览器下一次重绘前执行，此时浏览器已经完成了display: flex的渲染，能识别到top属性的变化，从而触发过渡。

内容的提问来源于stack exchange，提问作者Ibai Fernández