页面滚动时导航栏无法平滑收缩切换，求CSS动画解决方案

核心问题是直接通过替换元素/切换完全独立的类实现收缩，而非基于同一元素的状态切换，加上height: auto无法触发CSS过渡、误用animation而非transition，导致所有元素都是生硬替换而非平滑过渡。

1. 统一容器类，避免元素替换 #

不要用两个独立的容器类（.opportunities-tab-customization-container和.collapsed-opportunities-tab-customization-container），而是给同一个容器添加收缩类（比如.collapsed），基于同一元素做状态切换，才能触发过渡效果。

2. 修复高度过渡问题 #

height: auto无法被CSS过渡识别，改用max-height（或设置固定初始高度）实现高度平滑变化：

/* 基础容器样式 */
.opportunities-tab-customization-container[_ngcontent-gpm-c2] {
    align-items: center;
    background-color: white;
    display: flex;
    max-height: 200px; /* 设置比实际内容高的初始值 */
    height: auto;
    margin-bottom: 10px;
    width: 100%;
    padding: 20px 0; /* 用内边距辅助过渡，让收缩更自然 */
    transition: all 0.5s ease-out; /* 给所有可过渡属性添加过渡规则 */
}

/* 收缩状态样式 */
.opportunities-tab-customization-container[_ngcontent-gpm-c2].collapsed {
    max-height: 60px; /* 收缩后的目标高度 */
    padding: 8px 0; /* 收缩后的内边距 */
}

3. 替换animation为transition #

translate-y这类关键帧动画适合复杂序列效果，状态切换更适合用transition。移除原有动画类，把过渡逻辑整合到容器和子元素的基础样式中。

4. 处理其他元素的平滑过渡 #

针对标题、图片、下拉菜单等子元素，添加transition属性，在容器收缩时修改对应样式：

/* 标题大小过渡 */
.tab-title[_ngcontent-gpm-c2] {
    font-size: 24px;
    transition: font-size 0.5s ease-out;
}
.opportunities-tab-customization-container[_ngcontent-gpm-c2].collapsed .tab-title[_ngcontent-gpm-c2] {
    font-size: 18px;
}

/* 图片缩放过渡 */
.tab-image[_ngcontent-gpm-c2] {
    width: 80px;
    height: 80px;
    transition: all 0.5s ease-out;
}
.opportunities-tab-customization-container[_ngcontent-gpm-c2].collapsed .tab-image[_ngcontent-gpm-c2] {
    width: 40px;
    height: 40px;
}

/* 下拉菜单/文本淡出过渡 */
.tab-dropdown[_ngcontent-gpm-c2], .tab-text[_ngcontent-gpm-c2] {
    opacity: 1;
    transition: opacity 0.3s ease-out;
}
.opportunities-tab-customization-container[_ngcontent-gpm-c2].collapsed .tab-dropdown[_ngcontent-gpm-c2],
.opportunities-tab-customization-container[_ngcontent-gpm-c2].collapsed .tab-text[_ngcontent-gpm-c2] {
    opacity: 0;
    visibility: hidden; /* 可选：隐藏后禁止交互 */
}

5. 调整滚动触发逻辑 #

确保滚动时给同一个容器元素添加/移除.collapsed类，而非替换整个容器DOM。示例Angular组件逻辑：

@HostListener('window:scroll', ['$event'])
onScroll(event: Event) {
    const scrollTop = window.scrollY;
    const container = document.querySelector('.opportunities-tab-customization-container[_ngcontent-gpm-c2]');
    if (scrollTop > 50) {
        container?.classList.add('collapsed');
    } else {
        container?.classList.remove('collapsed');
    }
}

• 所有需要过渡的属性必须有明确的初始值和目标值，避免使用auto（比如用max-height替代height: auto）。
• 始终在同一元素上切换状态，不要替换元素，否则无法触发CSS过渡。
• 用transition处理状态切换，animation更适合循环或多阶段的复杂动画。

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