javascript - 将元素添加到 DOM 时，过渡什么属性来动画创建的空间？

Question

我希望将一个元素插入到 DOM 中，内嵌一些文本。在某些情况下，文本是对齐的、居中对齐的等等。但是，我希望这个新元素将插入的任何文本补间到它的新位置，而不是仅仅跳到它。示例:

条形代表父宽度。 El 1-5 这里是有道理的。当我将 El 6 添加到 DOM 中时(可能已经存在，但将其 display 从 none 更改为 inline-block)，我希望 El 1-5 滑入他们的新位置，而不是跳到它。设置 transition: left 0.2s ease-in-out; 似乎没有这样做。这是如何实现的？

Here is a fiddle使这更容易搞砸

Answer 1

听起来像是 flex 盒子的工作!参见 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 */

查看此fiddle:http://jsfiddle.net/MadLittleMods/EM4xL/