实现display: none搜索栏平滑动画：解决JSFiddle中搜索栏突兀显示问题

我帮你搞定这个平滑动画的问题，核心是替换直接的display切换逻辑——因为display: none/block的变化没法触发CSS过渡动画。我们可以用max-height、opacity和visibility结合过渡属性，来实现头部平滑展开、搜索栏淡入的效果。

具体实现步骤 #

1. 调整CSS样式

给头部和搜索栏添加过渡属性，用max-height模拟高度展开动画，配合opacity和visibility实现淡入效果：

/* 头部样式，添加过渡让高度变化更平滑 */
.header {
  background-color: #fff;
  padding: 1rem 0;
  /* 过渡底部内边距，模拟头部展开效果 */
  transition: padding-bottom 0.3s ease-in-out;
}

/* 默认隐藏的搜索栏样式 */
.search-bar {
  max-height: 0; /* 初始高度为0，隐藏内容 */
  opacity: 0;
  visibility: hidden;
  overflow: hidden; /* 防止内容溢出 */
  /* 给需要动画的属性添加过渡 */
  transition: max-height 0.3s ease-in-out, 
              opacity 0.3s ease-in-out, 
              visibility 0.3s ease-in-out;
  margin-top: 0.8rem;
}

/* 搜索激活状态的样式 */
.header.search-active {
  padding-bottom: 1.5rem; /* 头部底部内边距增加，实现展开感 */
}

.header.search-active .search-bar {
  max-height: 120px; /* 设置一个足够容纳搜索栏的高度，模拟auto效果 */
  opacity: 1;
  visibility: visible;
}

2. 修改JavaScript逻辑

不再直接切换display属性，而是通过切换类名来触发CSS过渡：

const searchIcon = document.querySelector('.search-icon');
const header = document.querySelector('.header');

searchIcon.addEventListener('click', () => {
  // 切换激活类，触发动画
  header.classList.toggle('search-active');
});

关键原理说明 #

• 为什么用max-height？ CSS过渡不支持height: auto的变化，设置一个足够大的max-height可以模拟高度自适应的展开效果，同时触发过渡动画。
• visibility + opacity的组合：visibility: hidden确保元素在隐藏时无法被点击，opacity实现淡入淡出，两者配合过渡属性，让动画更自然。
• 头部的padding过渡：通过调整头部的底部内边距，让头部看起来是平滑“展开”的，而不是突然增高。

只要把原来代码里的display切换逻辑替换成这套方案，就能实现你想要的平滑动画效果啦！

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