Javascript 向DOM添加元素时，要转换哪些属性以设置创建的空间的动画？

我希望在DOM中插入一个元素，并嵌入一些文本。在某些情况下，文本是对正的，居中对齐的，等等。然而，我希望这个新元素将任何文本推到它的新位置，而不是跳转到它。例如：

这些条表示父宽度。这里的El 1-5是合理的。当我将El 6添加到DOM中时（可能是因为它已经存在，但是将它的

display

从

none

更改为

inline block

），我希望El 1-5滑入新位置，而不是跳转到它。设置<代码>转换：左0.2秒轻松输入输出似乎没有这样做。这是如何实现的

---

要想让这件事更容易处理，这听起来像是柔性包装盒的工作！看

---

查看此小提琴：

是否尝试将过渡应用于元素的宽度？因为这里要调整的是宽度。但是，不确定如果一堆内容同时发生变化会是什么样子。@Brodie只是尝试了一下，不幸的是没有帮助。您能否提供一些示例结构/css，以便我们了解您正在使用的内容。子元素是否仅设置为内联块？它们是否设置了宽度或其他设置？您添加了许多奇怪的样式，因此它可能不会像您希望的那样工作，但这就是您应该如何操作->@adeneo问题在于，当el1被隐藏时，它仍然是父项的一部分，因此el2–el6不能完全证明，因为在开始的时候仍然有0px宽的el1。有一些答案，我甚至不知道这些存在！谢谢我想有一个附带条件就是要注意浏览器与它们的兼容性。但是是的，太棒了！它在android opera浏览器上运行良好。也许还有其他人

#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 */