[英]how to animate movement of div when adjacent div is set to display:none
请在此处查看代码: 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);
请试试这个:
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;
}
}
@keyframes fadeaway {
0% {
opacity: 1;
height: 100%;
}
50% {
opacity: 0;
}
100%{
height: 0px;
margin: 0px;
}
}
根据 Vahid 的回答,不透明度和高度同时具有动画效果。 我的会先褪色,然后高度变化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.