点击搜索图标隐藏图标并显示带1秒过渡效果的搜索栏实现问询

当前代码存在的问题 #

• 使用display: none/block切换元素显示状态，这类属性无法触发CSS过渡动画，导致没有平滑效果
• 过渡属性在点击时才临时添加，时机错误，应该提前在CSS中定义
• 仅做了简单的显示隐藏切换，未实现类似“图标展开为搜索栏”的视觉过渡

修复后的完整实现方案 #

核心思路是用CSS过渡支持的属性（如opacity、width、visibility）替代display，通过类名切换控制状态，实现1秒平滑展开效果。

HTML结构

<div id="search-section" class="search-section">
  <!-- 搜索图标 -->
  <img 
    src="https://populusww.com.au/wp-content/uploads/2023/01/search.png" 
    id="Search-Collapse" 
    class="search-icon"
    onclick="toggle_div_fun()"
  >
  <!-- 展开后的搜索栏容器 -->
  <div id="Search-Expand" class="search-expand">
    <input type="text" placeholder="搜索..." class="search-input">
  </div>
</div>

<!-- 菜单区域 -->
<div id="menu-section" class="menu-section">
  <!-- 菜单内容 -->
</div>

CSS样式（关键过渡定义）

/* 搜索区域容器，统一控制布局与过渡 */
.search-section {
  width: 15%;
  margin-top: 30px;
  transition: all 1s ease; /* 全局过渡时长1秒 */
  display: flex;
  align-items: center;
}

/* 搜索图标初始状态 */
.search-icon {
  cursor: pointer;
  transition: all 1s ease;
  visibility: visible;
  opacity: 1;
}

/* 搜索栏初始状态：隐藏（透明+不可见+宽度为0） */
.search-expand {
  visibility: hidden;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 1s ease;
  margin-left: 8px;
}

/* 搜索栏展开状态 */
.search-expand.active {
  visibility: visible;
  opacity: 1;
  width: 180px; /* 自定义展开后的宽度 */
}

/* 图标隐藏状态 */
.search-icon.hidden {
  visibility: hidden;
  opacity: 0;
  width: 0;
  overflow: hidden;
}

/* 菜单区域样式，保持过渡一致性 */
.menu-section {
  width: 65%;
  transition: all 1s ease;
}

/* 搜索区域展开后的顶部间距变化 */
.search-section.expanded {
  margin-top: 50px;
}

JavaScript逻辑（简化易维护）

function toggle_div_fun() {
  const searchIcon = document.getElementById("Search-Collapse");
  const searchExpand = document.getElementById("Search-Expand");
  const searchSection = document.getElementById("search-section");

  // 切换类名触发过渡动画
  searchIcon.classList.toggle("hidden");
  searchExpand.classList.toggle("active");
  searchSection.classList.toggle("expanded");
}

关键说明 #

1. 类名控制状态：避免直接操作元素style，通过切换预定义的CSS类来触发过渡，代码更清晰易维护
2. 过渡属性选择：使用opacity控制透明度、visibility保证元素交互性、width实现展开的宽度变化，这些属性均支持CSS过渡
3. 统一过渡时长：所有需要过渡的属性都设置为1秒，保证动画节奏一致

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