将元素添加到DOM时创建的空间转换为动画的属性是什么？

Question

我希望将内容中的元素插入到内嵌一些文本中。在某些情况下，文本是对齐的，居中对齐的等等。但是，我希望这个新元素推动的任何文本都可以补充到它的新位置，而不是仅仅跳转到它。例如：

条形表示父宽度。这里的E1 1-5是合理的。当我向DOM添加El 6时（可能已将它添加到DOM中，但将其display从none更改为inline-block），我希望将El 1-5添加到DOM滑入他们的新位置，然后跳到它。设置transition: left 0.2s ease-in-out;似乎没有这样做。这是如何完成的？

Here is a fiddle让这更容易搞乱

Answer 1

听起来像弹性盒的工作！见here

#sections {
    display: flex;
    flex-direction: row;
}

#sections div
{
    flex: 1;   
    transition: width 0.2s ease-in-out;
}
/* note the use of keyframes for the flex attribute in the fiddle though */

请参阅小提琴：http://jsfiddle.net/MadLittleMods/EM4xL/