html - CSS转换以更改布局(其他元素在DOM中显示)？

显示新块时，其他块可能会在页面上移动。
当显示另一个块时，是否可以使用css转换设置块移动的动画？
初始状态：
后续状态：
如：
最初只显示蓝色块
显示绿色块，向下推动蓝色块
我希望蓝色块动画移动到它的新位置
Obligatory JSFiddle
是否可以设置蓝色块移动到新位置的动画？我在块和它们的父块上都设置了csstransition。
或者（正如我开始怀疑的那样）css转换仅仅是为了实际的css更改，而不是那些css更改的后续效果？

最佳答案

可以使用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)