javascript - 将元素添加到 DOM 时要转换什么属性来对创建的空间进行动画处理？

Question

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

条形代表父宽度。 El 1-5 这里是合理的。当我将 El 6 添加到 DOM 时(可能已经存在，但将其 display 从 none 更改为 inline-block)，我希望 El 1-5 滑入新位置，而不是跳到新位置。设置 transition: left 0.2s escape-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/