當相鄰的 div 設置為 display:none 時如何為 div 的移動設置動畫

Question

請在此處查看代碼： https://jsfiddle.net/pwasoutside/uaqbj30z/2/

您可以看到帖子出現在屏幕上，然后在幾秒鍾后消失。 但是，在將帖子設置為 display:none 后，下面的帖子會立即向上移動。 我希望這個動作是動畫的。 我怎樣才能做到這一點？

css：

.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; 
    }
  }

js：

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);

Answer 1

請試試這個：

html, body {
    height: 100%;
    margin: 0px;
}
#posts {
    height: 100%;
}
.post {
    background-color: red;
    color: white;
    width: 100%;
    height: 100%;
    display: block;
    transition: transform 3s ease;
    margin: 0px;
}

p {
    margin: 0px;
}

.hidden {
    animation: fadeaway 2s;
}

@keyframes fadeaway {
    from {
        opacity: 1;
        height: 100%;
    }

    to {
        opacity: 0;
        height: 0px;
        margin: 0px;
    }
}

Answer 2

@keyframes fadeaway {
    0% {
        opacity: 1;
        height: 100%;
    }

    50% {
        opacity: 0;
    }

    100%{
        height: 0px;
        margin: 0px;
    }
}

根據 Vahid 的回答，不透明度和高度同時具有動畫效果。 我的會先褪色，然后高度變化。