CSS3移除另一个div时的转换动画

我有一个包含通知的

。因此，我的标记与此类似：

<div id="notifications">
    <div class="notification">
         .... <!-- Notification 1 -->
    </div>
    <div class="notification">
         .... <!-- Notification 2 -->
    </div>
    ...
</div>

.... 
.... 
...

我可以在

通知

div进出时设置它们的动画。但假设我关闭了通知1（将其从DOM中删除），那么通知2自然会跳到通知1的位置

---

是否可以使用css设置动画？我对UI编码知之甚少。是否可以通过CSS3说“无论什么时候你需要移动，无论出于什么原因，都要在1秒内平稳移动”，或者我必须硬编码通知的大小并使用

翻译
或其他方法？
如果你的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

我注意到我使用的是动画，但过渡已经足够了。除此之外，主要问题是：在向空容器添加元素时避免转换。解决这个问题的方法是在容器元素中创建相反的转换。请参阅通过CSS设置的属性。通知：空

这有点尴尬，因为填充不支持负值；这意味着做与自然相反的事情，并改变通知端的边距

如果您更改第一个的高度，您可以更改，最好使用
transform:scaleY（）
来提高性能，但这会扭曲它，但设置高度动画的成本很高。如果他们被绝对定位，那么你可以。事实上，要做到这一点，你几乎必须使用javascript。“在演示中有一个小缺点，即第一次渲染时，动画也会播放。在制作中，这可能不会成为问题，因为列表在开始时是空的。”问题是，当列表为空并且我添加了一个通知时，动画是在我添加的第一个动画上运行的，因此通知会出现，然后跳下并返回到其原始位置。你是对的，我低估了问题。添加了更好的解决方案如果设置了高度，则可以将附加元素的高度转换为设置的高度。否则，在添加新项目时，您可能只需添加不透明度淡入，以使其看起来更平滑（：太棒了，VAL！
.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;
}