Question

假设我有以下HTML：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>AlwaysAtTheEnd</li>
</ul>

在列表项3之后，我将使用javascript插入列表项4。在那之后，HTML将如下所示：

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>AlwaysAtTheEnd</li>
</ul>

然而，我想要＆＃34; AlwaysAtTheEnd＆＃34;项目顺利滑下以为新项目腾出空间，而不是立即弹出以腾出空间。

我尝试简单地添加以下CSS，但它似乎不会影响任何内容：

li {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

在这里小提琴：http://fiddle.jshell.net/pcsj2mgb/

编辑：固定小提琴：http://fiddle.jshell.net/pcsj2mgb/1/

Answer 1

可以使用CSS，~~完成，但您需要定义li元素的最终高度，以便您可以将设置为高度。~~

当然，您需要将newItem类添加到您要追加的元素中，因此CSS会影响它。

更新：无需定义最终高度！让我们'动画max-height。更新了代码段。

add = function() {
  listItems = document.getElementsByTagName('li');
  var lastItem = listItems[listItems.length - 1]
  var newItem = document.createElement('li');
  newItem.innerHTML = "4";

  newItem.classList.add("newItem");

  lastItem.parentNode.insertBefore(newItem, lastItem);
}

.newItem {
  max-height: 0;
  opacity: 0;
  animation: grow 1s ease-in-out forwards;
  -webkit-animation: grow 1s ease-in-out forwards;
}
@-webkit-keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}
@keyframes grow {
  to {
    max-height: 20px;
    opacity: 1;
  }
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>AlwaysAtTheEnd</li>
</ul>
<button onClick="add()">Add</button>

Answer 2

我的javascript代码已更改：

add = function(){
    var listItems = document.getElementsByTagName('li');
    var secondLastItem = listItems[listItems.length - 2];
    var newItem = document.createElement('li');
    newItem.innerText = 4;

    // some pre defined css to new item
    newItem.style.height = '0px';
    newItem.style['opacity'] = '0';

    // This is change : because you are appending li into second last li, not in ul : so this function will insert li after last second item 
    secondLastItem.parentNode.insertBefore(newItem, secondLastItem.nextSibling);

    setTimeout(function(){
        // after append new item will get some css changes
        newItem.style.height = '18px';
        newItem.style['opacity'] = '1';
    },10)

}

你可以看到这个例子的小提琴链接：http://fiddle.jshell.net/13gg7kwf/

Answer 3

通过Javascript添加CSS值有点肮脏。

我找到了一种通过使用仅CSS解决方案来实现这一目标的方法（感谢： http://christianheilmann.com/2013/09/19/quicky-fading-in-a-newly-created-element-using-css/）。

不使用Transition，而应使用动画。

您创建一个CSS类，并通过JS添加它，在元素添加到DOM后立即触发动画：

li.fade {
    -webkit-animation: fade 5s;
    animation: fade 5s;
    opacity: 1;
}
/* -fail- */
@-webkit-keyframes fade {
from {opacity: 0}
to {opacity: 1}
}@keyframes fade {
from {opacity: 0}
to {opacity: 1}
}

完整解决方案： http://jsfiddle.net/8wdk63ce/

如何使用现有列表项的CSS转换为新的列表项腾出空间？

3 个答案: