在向 DOM 添加元素时创建的 space 需要什么属性过渡动画？

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

听起来像是弹性盒子的工作！参见 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/

在向 DOM 添加元素时创建的 space 需要什么属性过渡动画？

What property to transition to animate the space created when adding an element to the DOM?

javascript

css

jquery

css-transitions

在向 DOM 添加元素时创建的 space 需要什么 属性 过渡动画？

What property to transition to animate the space created when adding an element to the DOM?

javascript

css

jquery

css-transitions

在向 DOM 添加元素时创建的 space 需要什么属性过渡动画？