为堆叠的Flexbox元素设置动画

Question

我有一个菜单，单击a按钮时会出现一些按钮。现在所有这些按钮都堆叠在一起，当点击按钮时，其他按钮会滑动到位。

https://jsfiddle.net/ck1ux91n/

现在是HTML：

<div id="menu">
    <button type="button" id="menu-gear" class="btn btn-default btn-block hover menu menu-rotate"><li class="fa fa-lg fa-fw fa-gear" aria-hidden="true"></li></button>
    <button type="button" id="menu-button-01" class="btn btn-default btn-block hover menu menu-animate"><i class="fa fa-lg fa-fw fa-floppy-o" aria-hidden="true"></i></button>
    <button type="button" id="menu-button-02" class="btn btn-default btn-block hover menu menu-animate"><i class="fa fa-lg fa-fw fa-folder-open-o" aria-hidden="true"></i></button>
</div>

有时屏幕上没有足够的空间，因此我希望我的按钮可以换行到下一行。理想情况下，我想用flexbox来做这件事。

是否可以使用flexbox以某种方式将按钮堆叠在一起并仍然可以创建某种动画？