動態創建動畫元素？

我目前正在創建一個待辦事項列表，我有一個想法，但我不知道如何實現它。動態創建動畫元素？

當我將項目添加到我的列表中時，我希望他們對.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); 
    } 
};

來源

2017-06-22 Collin DeSoto

您可以提供當前的代碼？ – N3SS4H

我已經走了，並添加了我的代碼。我之前沒有添加它的唯一原因是因爲我沒有爲我想實現的想法寫任何內容，但是我寫的任何內容都沒有取得任何結果。 –

我不是太熟悉的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">

來源

2017-06-23 00:58:53 Russell

太棒了！這應該工作！當我回到我的電腦時我會嘗試它。 –

動態創建動畫元素？

回答

相關問題