Question

我有<div>包含通知。所以我的标记与此类似：

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

我可以为notification div进行动画处理。但是说我要关闭通知1（从我的DOM中删除它），然后自然通知2将跳转到通知1的位置。

是否可以使用css为此设置动画？我对UI编码知之甚少。是否可以通过CSS3＆＃34;无论何时需要移动，无论出于何种原因，都可以在1秒内顺利完成，或者我必须硬编码通知的大小并使用translate或其他东西？

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

demo

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

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

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。

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

new fiddle

删除另一个div时的CSS3 Transition动画

1 个答案: