如何实现输入框输入内容时从另一div下方滑出目标div？

嘿，我来帮你搞定这个输入触发的滑出效果！咱们一步步来，确保这个交互流畅又贴合需求：

1. 先确认HTML结构 #

首先得保证你的HTML里有这几个核心元素（如果已有可以跳过，重点是层级关系要对）：

<div class="search-container">
  <input type="text" id="search-input" placeholder="输入内容搜索...">
</div>
<div class="search-result-container" id="search-results">
  <!-- 这里放搜索结果内容 -->
  <p>搜索结果示例</p>
</div>

注意：search-result-container要放在search-container的下方，确保布局上的上下层级关系正确

2. 核心CSS：实现平滑滑出动画 #

这一步是让容器能优雅滑出的关键，我们用CSS的transition属性做过渡效果，初始状态让容器隐藏，只有输入内容时才展开：

.search-result-container {
  /* 初始状态：高度为0，隐藏内部内容 */
  height: 0;
  overflow: hidden;
  /* 设置过渡动画，可根据需求调整时长和曲线 */
  transition: height 0.3s ease-in-out;
  /* 自定义样式：比如边框、背景色，按需调整 */
  border: 1px solid #eee;
  border-top: none;
  background-color: #fff;
}

/* 激活类：触发滑出效果的开关 */
.search-result-container.active {
  /* 如果内容高度固定，直接写固定值；如果高度不确定，用max-height+height:auto */
  max-height: 400px;
  height: auto;
}

如果搜索结果高度不固定，优先用max-height代替固定height，这样内容再多也不会撑破容器，同时动画依然流畅。

3. JavaScript：监听输入事件触发动画 #

接下来要监听输入框的输入行为，根据内容有无来切换激活类：

const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

// 监听输入事件
searchInput.addEventListener('input', function() {
  // 判断输入框是否有有效内容
  if (this.value.trim().length > 0) {
    // 添加激活类，触发滑出
    searchResults.classList.add('active');
    // 这里可以插入你的搜索逻辑，比如异步请求数据填充结果
  } else {
    // 移除激活类，收起容器
    searchResults.classList.remove('active');
  }
});

// 可选优化：点击页面其他区域收起搜索结果
document.addEventListener('click', function(e) {
  const isClickInSearchArea = searchInput.contains(e.target) || searchResults.contains(e.target);
  if (!isClickInSearchArea) {
    searchResults.classList.remove('active');
    searchInput.value = ''; // 可选：同时清空输入框
  }
});

小提示：如果是异步请求搜索数据，建议在请求返回后再添加激活类，避免空容器滑出的尴尬~

4. 提升体验的小细节 #

• 给输入框加focus事件：当用户点击输入框但还没输入时，也可以显示容器（比如展示热门搜索词）
• 调整过渡参数：比如0.2s ease-out会让滑出动作更轻快
• 复合动画：如果想要更丰富的效果，可以同时过渡opacity和transform: translateY(-10px)，实现淡入+位移的组合滑出

这样一套下来，就能完美实现输入内容时，搜索结果容器从search-container下方平滑滑出的交互啦！

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