不同高度滑块元素切换时出现动画层叠异常问题

嘿，我看你遇到了天气面板切换动画的头疼问题——三个高度不一样的面板在滑动切换时，会互相叠在一起，得等动画跑完才会乖乖回到正确位置，就像你展示的动图效果那样对吧？我帮你捋捋问题出在哪，再给你搞定它的办法。

问题根源分析 #

你的面板用了position: relative来实现滑动动画，但相对定位的元素并没有脱离文档流，它们的布局空间还是会互相影响。当两个高度不同的面板同时显示（动画过程中），后面的元素会跟着前面元素的位置“乱跑”，加上相对定位的元素移动时还会占据原来的位置，这就直接导致了动画过程中的层叠和错位。

解决方案：让面板脱离文档流，统一滑动层级 #

核心思路是把所有天气面板改成绝对定位，让它们脱离文档流，这样就不会互相干扰布局了，动画时都会在父容器的同一层滑动。具体分几步改：

1. 调整父容器CSS

给包裹面板的容器加上相对定位和溢出隐藏，作为绝对定位面板的参考容器，同时裁剪滑动时超出的部分：

main div.container {
    max-width: 1266px;
    width: 60%;
    background: #DCDCDD;
    position: relative; /* 新增：作为面板绝对定位的参考 */
    overflow: hidden; /* 新增：裁剪滑出容器的面板部分 */
    min-height: 400px; /* 可选：设置最小高度避免容器塌陷，可根据你的内容调整 */
}

2. 修改天气面板的定位方式

把面板的相对定位改成绝对定位，同时用transform替代left实现动画（性能更优）：

main div.container > section.weather-section {
    position: absolute; /* 替换原来的relative */
    top: 0;
    left: 0;
    width: 100%;
    display: none;
    transition: 1.5s ease-in-out transform; /* 用transform动画，GPU加速更流畅 */
    transform: translateX(0);
}

main div.container > section.weather-section.next,
main div.container > section.weather-section.prev {
    position: absolute;
    top: 0;
    width: 100%;
    display: block;
}

main div.container > section.weather-section.next {
    transform: translateX(100%); /* 从右侧进入 */
}

main div.container > section.weather-section.prev {
    transform: translateX(-100%); /* 从左侧进入 */
}

main div.container > section.weather-section.next.left,
main div.container > section.weather-section.prev.right {
    transform: translateX(0); /* 滑到容器中间 */
}

main div.container > section.weather-section.active.left {
    transform: translateX(-100%); /* 滑出左侧 */
}

main div.container > section.weather-section.active.right {
    transform: translateX(100%); /* 滑出右侧 */
}

main div.container > section.weather-section.active {
    transform: translateX(0);
    display: block;
}

3. 动态适配容器高度（可选但推荐）

因为面板高度不同，切换时如果容器高度固定，可能会出现内容被截断或者空白的情况。我们可以在动画结束后，把容器高度设置为当前激活面板的高度：
在你的JS代码里，找到两个transitionend的回调函数，各添加一行代码：

// 切换到下一面板的回调示例
nextSection.addEventListener('transitionend', () => {
        nextSection.classList.add("active");
        // 新增：动态设置容器高度适配当前面板
        document.querySelector('main div.container').style.height = nextSection.offsetHeight + 'px';

        activeWeatherSection.classList.remove("left");
        activeWeatherSection.classList.remove("active");

        nextSection.classList.remove("next");
        nextSection.classList.remove("left");

        isFetching = false;
    },
    {once: true}
);

还要在页面加载完成后，初始化一次容器高度：

// 页面加载完成后设置初始高度
window.addEventListener('load', () => {
    const initialActiveSection = document.querySelector('main div.container > section.weather-section.active');
    if (initialActiveSection) {
        document.querySelector('main div.container').style.height = initialActiveSection.offsetHeight + 'px';
    }
});

效果验证 #

改完之后，所有面板都会在父容器的同一层滑动，不会再出现动画过程中的层叠问题，而且滑动更流畅，容器高度也会自动适配当前面板的内容，页面布局不会跳来跳去。

备注：内容来源于stack exchange，提问作者Starnec