Javascript 使用CSS为生成列表中的新添加设置动画

我有很多这样的元素：

<ul id="task-list">
  <li class="task"></li>
  <li class="task"></li>
  <li class="task"></li>
  <li class="task"></li>
</ul>

该列表用于重新排序，并在列表顶部添加新项目。每个项目的高度可以是任何东西

---

有没有可能在列表向下滑动以弹出新任务的情况下为新添加创建CSS动画，或者我是否需要更改逻辑以将每个任务添加到现有列表中，而不是每次都生成整个列表？

您可以使用一些简单的jquery函数来解决这个问题，尽管AngularJS看起来要干净得多。使用示例添加和删除元素的一个小示例

HTML

---

是否可以使用CSS为列表中的新添加创建一个高度或淡入淡出动画？如何确定任务列表中的添加内容？您希望创建的动画可能使用一些花哨的JavaScript，但据我所知，没有适用于文档布局ie的CSS动画，将一个元素转换到一个向下移动其他元素的新位置。至少，您的JavaScript必须保留现有列表，并找出已更改的内容，以便正确设置动画。

function addHTML(allTasks) {
  var tasks = compileTemplate(allTasks);
  return $('#task-list').html(tasks);
}

function compileTemplate(allTasks) {
  var source = $('#task-template').html();
  var template = Handlebars.compile(source);
  return template({
    tasks: allTasks
  });
}

<ul id="task-list">
    <li class="task"><button class="remove">remove</button>Lorem</li>
  <li class="task"><button class="remove">remove</button>Ipsum</li>
  <li class="task"><button class="remove">remove</button>Dilor</li>
  <li class="task"><button class="remove">remove</button>Test</li>
</ul>

<li class="task" id="hidden-task"><button class="remove">remove</button>Test</li>
<button class="add">add last Child</button>

//.remove is class of your remove button, task is the list element
$('.remove', '.task').on('click', function(){
    var li = $(this).parent();
    li.slideToggle({
    'complete':function(){
        li.remove()
    }
    });
})

//use hidden element as dummy
var element = $('#hidden-task');

//cache tasklist
var taskList = $('#task-list');
$('.add').on('click', function(){
    //create a deep clone
    var clone = element.clone(1,1);
    taskList.append(clone);
    setTimeout(function(){
    clone.slideToggle()
    }, 200);
});

var nth = 2;
$('.c2th').on('click', function(){
    var clone = element.clone(1,1);
    $('li').eq(nth-1).after(clone);
    setTimeout(function(){
    clone.slideToggle()
    }, 200);
});