css动画其他div,删除另一个div时的CSS3 Transition动画

如果您的div具有相似的高度，则可以这样做。

关键是为列表中第一项的边距高度设置动画。

.test {

left: 0px;

top: 0px;

width: 400px;

height: 300px;

position: relative;

}

.notification {

height: 40px;

background: lightblue;

margin: 2px;

}

.notification:first-child {

-webkit-animation: move 1s ease-out;

animation: move 1s ease-out;

}

@-webkit-keyframes move {

0% {margin-top: 42px;}

100% {margin-top: 2px;}

}

@keyframes move {

0% {margin-top: 42px;}

100% {margin-top: 2px;}

}

在演示中有一点缺点，就是第一次渲染时，动画也会播放。在制作中，这可能不是一个问题，因为列表在开头就是空的。

解决上一个问题的更好解决方案：

CSS

.notifications {

left: 0px;

top: 0px;

width: 400px;

height: 300px;

position: relative;

border: solid 1px green;

padding-top: 40px;

transition: padding-top 1s;

}

.notifications:empty {

padding-top: 0px;

}

.notification {

height: 40px;

background: lightblue;

margin: 2px;

transition: margin-top 1s;

}

.notification:first-child {

margin-top: -38px;

}

我注意到我正在使用动画，但这种过渡就足够了。除了主要问题：当我向空容器添加元素时避免转换。解决这个问题的方法是在容器元素中创建相反的过渡。通过CSS查看属性集到.notifications：empty。

这有点尴尬，因为填充不会支持负值;这意味着与自然相反，并改变通知方面的边缘。