布局更改的 CSS 过渡（因为 DOM 中显示了其他元素）？答案

【问题标题】：CSS transitions for layout changes (as other elements are revealed in the DOM)?布局更改的 CSS 过渡（因为 DOM 中显示了其他元素）？
【发布时间】：2014-05-02 10:28:44
【问题描述】：

当显示一个新块时，其他块可能会在页面上移动。

当显示另一个块时，是否可以使用 CSS 过渡来动画块的移动？

初始状态：

后续状态：

例如：

最初只显示蓝色块
显示绿色块，将蓝色块向下推
我想让蓝色块动画移动到新位置

Obligatory JSFiddle

是否可以为蓝色块移动到新位置设置动画？我在块及其父级上都设置了 CSS transition。

或者（正如我开始怀疑的那样）CSS 过渡仅适用于实际的 CSS 更改，不是这些 CSS 更改的后续效果？

【问题讨论】：

标签： html css css-transitions

【解决方案1】：

您可以使用 CSS3 更改布局，因为您可以为边距、位置、宽度、高度设置动画...

问题是触发了这些布局更改。但是您可以使用 JS 的帮助通过类更改来触发这些动画。

对于您的示例，您可以这样做：

FIDDLE

CSS：

.item {
    width: 150px;
    height: 150px;
    margin: 20px;
    overflow: auto;
    transition: all 0.5s ease-out;
}
.first {
    margin-top:-170px;
}

JS :

setTimeout(function () {
    document.querySelector('.first').classList.remove("first");
}, 2 * 1000)

【讨论】：

啊，所以，与其使用display，不如使用margin 在屏幕外显示一些东西，然后用动画改变那个边距？有道理。
@mikemaccana 以您的示例为例，它可以工作，但对于其他情况，您可以使用 position 和 top/left...
如果你的元素不是用绝对值定位，而是用简单的布局，比如块元素在一个下方怎么办？当在块元素列表的中间添加或删除元素时，您可以为布局的更改设置动画吗？当您不能保证您的元素将具有预定大小时，这是需要的。

【解决方案2】：

有一种称为 FLIP（First、Last、Invert、Play）的技术和一个实现它的库，称为 Flipping.js。在this article 中有描述。

【讨论】：