对动态创建的元素进行动画处理？

Question

我目前正在创建一个待办事项清单，但有一个主意，但我不知道如何实现。

当我将项目添加到列表中时，我希望它们成为.fadeIn（'slow'），但我不确定如何实现！ 我知道如何$（'ul'）。fadeIn（'slow'），但是当调用todoList.addListHTML（）函数时，是否有办法使动画发生？

我最初有：

$('ul').fadeIn('slow')

显然，这是行不通的，因为页面加载时ul不存在。

这是代码，现在这很仓促，没有重构或其他任何东西：

let ul = document.createElement('ul');
ul.id = "todoList";

let todoList = {
  todos: ['item 1', 'item 2', 'item 3'],

  displayTodos: function(){
    console.log(this.todos);
  },

  changeTodo: function(position, newValue){
    this.todos[position] = newValue;
    this.displayTodos();
  },

  addTodo: function(todo){
    let unList = document.getElementById('todoList');
    let li = document.createElement('li');
    let span = document.createElement('span');

    span.textContent = todo;
    li.appendChild(span);
    ul.appendChild(li);
    document.body.appendChild(ul);

    this.displayTodos();
  },

  removeTodos: function(position, endRemove){
    this.todos.splice(position, endRemove);
    this.displayTodos();
  },

  doubleList: function(){
    let newArr = [];
    let arrSize = this.todos.length;
    console.log(newArr);

    for(let i = 0; i < arrSize; i++){
      newArr.push(this.todos[i]);
      this.todos.push(newArr[i]);
    }
      this.displayTodos();
  },

  addListToHTML(){
    document.body.appendChild(ul);

    console.log(document.body.children);

    for(let i = 0; i < this.todos.length; i++){
      let li = document.createElement('li');
      let span = document.createElement('span');

      span.textContent = this.todos[i];
      li.appendChild(span);
      ul.appendChild(li);
    }
  },

  clearList: function(){
    document.body.removeChild(ul);
  }
};

Answer 1

我对JQuery不太熟悉，因此可能有更好的方法来做到这一点。 但是，只要我需要设置动画，就可以切换类。 因此，当您添加每一项时，您希望将其淡入淡出，应将不透明度从0更改为1。

 var todoList = ['item1', 'item2', 'item3']; var newElement; $('#add-list-items').on('click', function() { var nextNumber = $('#to-do-list li').length + 1; var newHTML = '<li class="Loading">' + 'Item ' + nextNumber + '</li>'; newElement = $(newHTML).appendTo('#to-do-list'); $(newElement).addClass('Loaded'); }); 

 .Loading { opacity: 0; -webkit-animation: fadeout .5s ease-in; -moz-animation: fadeout .5s ease-in; -o-animation: fadeout .5s ease-in; animation: fadeout .5s ease-in; } .Loaded { opacity: 1; -webkit-animation: fadein 1s ease-in; -moz-animation: fadein 1s ease-in; -o-animation: fadein 1s ease-in; animation: fadein 1s ease-in; } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { from { opacity:0; } to { opacity:1; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="to-do-list"> </ul> <input type="button" id="add-list-items" value="Add Items">