如何实现div设置display:none后相邻元素上移的过渡动画

现存问题 #

当前实现中，帖子元素展示数秒后触发淡出动画，但元素进入隐藏状态被移出文档流的瞬间，下方相邻帖子会瞬间向上跳变，没有平滑的位移过渡效果。

现有实现代码 #

样式代码 #

.post {
    background-color: red;
    color: white;
    width: 300px;
    height: 50px;
    display: block;
    transition: transform 3s ease;
}

.hidden {
    animation: fadeaway 2s;
}

@keyframes fadeaway {
    from {
        opacity: 1;
    }
    to {
        opacity: 0; 
    }
}

逻辑代码 #

var posts = document.getElementById('posts');
var i = 0; 
var interval = setInterval(() => {
    if (i < 5) {
        var post = document.getElementById('post' + i);
        post.classList.add('hidden');
        i++;
    } else {
        clearInterval(interval);
    }
}, 3000);

问题根因 #

• 原淡出动画仅处理了透明度变化，没有在动画过程中收缩元素自身在文档流中占据的空间
• 元素被设置为display: none的时机过早，会让其原本占据的位置瞬间空出，后续元素没有缓冲时间就直接补位，形成跳变效果
• 原代码中写的transform过渡没有对应的属性变化触发点，完全不生效

实现平滑上移效果的调整方案 #

• 扩展淡出动画的处理范围：在动画过程中同步对元素的高度、外边距做逐帧收缩，让元素在透明度降为0的同时，自身占据的文档流空间也逐步压缩为0
• 延迟移出文档流的时机：等收缩+淡出的完整动画执行完毕后，再将元素设置为display: none，避免提前移除占位导致的跳变
• 调整元素基础样式：移除固定写死的高度，给元素加上overflow: hidden，保证高度收缩时内部内容不会溢出

调整后的参考代码：

调整后样式 #

.post {
    background-color: red;
    color: white;
    width: 300px;
    overflow: hidden;
}

.hidden {
    /* 设置动画 forwards 属性，保证动画结束后保持最终样式 */
    animation: fadeaway 2s ease forwards;
}

@keyframes fadeaway {
    from {
        opacity: 1;
        height: 50px;
        margin: 0;
    }
    to {
        opacity: 0;
        /* 收缩到0高度，完全释放占位空间 */
        height: 0;
        margin: 0;
    }
}

调整后逻辑 #

var interval = setInterval(() => {
    if (i < 5) {
        var post = document.getElementById('post' + i);
        post.classList.add('hidden');
        // 监听动画结束事件，动画跑完再彻底移出文档流
        post.addEventListener('animationend', () => {
            post.style.display = 'none';
        }, { once: true });
        i++;
    } else {
        clearInterval(interval);
    }
}, 3000);

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