围绕列表进行动画移动

【问题标题】：Animate movement around list围绕列表进行动画移动
【发布时间】：2017-10-15 23:32:59
【问题描述】：

我需要将一个项目附加到一个带有缓动转换的列表中。与其让其他人在追加时突然移动到他们的新位置，我需要他们缓和到他们的新位置。

<ul>
  <li id="1"/>
  <li id="2"/>
  <li id="3"/>
  <li id="4"/>
  <li id="5"/>
</ul>

伪代码appendInMiddle:

$('ul').appendInMiddle(<li/>)

【问题讨论】：

你看到我的回答了吗？这不是你想要的吗？

标签： javascript jquery animation jquery-animate css-transitions

【解决方案1】：

我设置了一个css动画，它在开头添加了一个负边距，然后将其删除，恢复了标准外观：（用于插入元素的普通JS，但如果你愿意，你可以使用jQuery，只需添加类到新元素）

function add () {
    
    var ele = document.getElementById('2');
    var parent = ele.parentElement;
    var added = document.createElement ('li');
    added.innerHTML='new';
    added.className = 'add';
    parent.insertBefore (added, ele);

}

.add {
    animation: grow 1s;
}

@keyframes grow {
    from {margin-bottom: -1em;}
    to {margin-bottom: 0em;}
}

<ul>
  <li id="1"/>
  <li id="2"/>
  <li id="3"/>
  <li id="4"/>
  <li id="5"/>
</ul>
<button onclick="add()">add</button>

【讨论】：