布局更改的CSS转换（在DOM中显示其他元素）？

Question

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

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

初始状态：

后续状态：

例如：

• 最初只显示蓝色块
• 显示绿色块，向下按蓝色块
• 我希望蓝色块能够动画移动到新位置

Obligatory JSFiddle

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

或者（因为我开始怀疑）仅针对实际的CSS更改进行CSS转换，不是那些CSS更改的后续影响？

Answer 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)

Answer 2

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