Question

我需要将一个项目附加到一个缓动转换的列表中。我不需要让其他人突然进入追加的新位置，而是让他们放松到新的位置。

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

Psuedocode appendInMiddle：

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

Answer 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>

列表周围的动画移动

1 个答案: