当相邻的 div 设置为 display:none 时如何为 div 的移动设置动画

Question

Please check out the code here: https://jsfiddle.net/pwasoutside/uaqbj30z/2/

You can see that posts appear on screen and then fade away after a few seconds. But, after a post is set to display:none, the post below immediately moves upward. I want this movement to be animated. How can I do this?

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

Please try this:

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

as per Vahid's answer, the opacity and height animates simultaneously. Mine will first fade and then height changes.