动态创建动画元素？

我目前正在创建一个待办事项列表，我有一个想法，但我不知道如何实现它。动态创建动画元素？

当我将项目添加到我的列表中时，我希望他们对.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

太棒了！这应该工作！当我回到我的电脑时我会尝试它。 –

动态创建动画元素？

回答

相关问题