ダイナミックに作成された要素をアニメーション化しますか？

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