Question

我目前正在创建一个小的待办事项列表，我有一个想法，但我不知道如何实现它。

当我将项目添加到我的列表中时，我希望它们为.fadeIn（＆＃39; slow＆＃39;）但我不确定如何实现这一点！我知道如何$（＆＃39; ul＆＃39;）。fadeIn（＆＃39; slow＆＃39;），但有没有办法在调用函数todoList.addListHTML（）时使动画发生？ / p>

我最初有：

$('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">

动画创建元素动画？

1 个答案: