如何在使用Javascript創建輸出時添加轉換和轉換？

我使用li元素將輸出附加到ul元素。我可以根據需要生成輸出，但我不知道如何使用轉換和轉換，因爲Javascript正在創建這些元素。如何在使用Javascript創建輸出時添加轉換和轉換？

我想轉換li元素，因爲它們從DOM中的Javascript中顯示。

香草味JavaScript是首選。

我有什麼，HTML：

<div class="add">  
<input type="text" id="addTodoTextInput" placeholder="Add Task Here" onkeydown="handlers.addTodo()" > <!-- input text field to add <li> --> 
<button onclick="search()"> <img src="add.png" height="20" width="20" alt=""> </button> <!-- button to add li -->  
</div> 
<ul class="result"> 
    <!-- output generated with JavaScript will be appended here --> 
</ul>

CSS：

li{ 
    margin: 0 5px 0 5px; 
    padding: 5px; 
    font-family: cursive; 
    color: #006cff; 
    font-size: 1.3em; 
    background: rgba(43, 229, 43, 0.28); 
    transition: 2s; 
} 

li:hover{ 
    transform: translateX(50px); 
}

的JavaScript：

var handlers = { 
    addTodo: function(){ 
     var addToDoInput = document.getElementById('addTodoTextInput'); 
     todoList.addToDo(addToDoInput.value); 
     addToDoInput.value = ""; 
     view.displayTodo(); 
    } 
} 

var view = {  
    displayTodo: function() { 
     var todosUl = document.querySelector('ul'); 
     todosUl.innerHTML = ''; 
     todoList.itemList.forEach(function(todo,position) { 
      var todosLi = document.createElement('li'); 
      var todoTextWithCompletion = ""; 
      if(todo.completed === true) { 
       todosLi.style.textDecoration = "line-through"; 
      } 
      todosLi.id = position; 
      todosLi.textContent = todo.todoText; 
      todosLi.appendChild(this.createDeleteButton()); 
      todosLi.appendChild(this.createToggleButton()); 
      todosUl.appendChild(todosLi); 
     }, this); 
    } 
}

來源

2017-05-06 swastik sharma

*'我想要轉換李標籤* *或者你想*我們轉換你的LI標籤* –

@ RokoC.Buljan我不是要求直接回答的人...只是告訴我一些工作..我會讓我的方式從那裏.. –

'我在追加我的輸出到使用li標籤的ul標籤，那麼爲什麼不直接在這裏顯示代碼呢？所以願意幫助的人可以從那裏繼續......你讀了[如何創建一個最小，完整和可驗證的例子]（https://stackoverflow.com/help/mcve）？ – caramba

function insertLI(EL_target, content) { 
 

 
    var EL_li = document.createElement("li"); 
 
    var NODE_content = document.createTextNode(content); 
 

 
    EL_li.appendChild(NODE_content); 
 
    EL_target.appendChild(EL_li); 
 

 
    // Register a live classList change in order to trigger CSS transition 
 
    setTimeout(function() { 
 
     EL_li.classList.add("added"); 
 
    }, 0); 
 
    
 
} 
 

 

 

 
var EL_ul = document.getElementById("myUL"); 
 
var i = 0; 
 

 
document.getElementById("add").addEventListener("click", function() { 
 
    insertLI(EL_ul, "I'm number"+ i++); 
 
})

ul li{ 
 
    opacity: 0;   /* initially set opacity to 0 */ 
 
} 
 

 
.added{ 
 
    transition: opacity 1s, color 3s;  /* transition!! yey */ 
 
    opacity:1; 
 
    color: fuchsia; 
 
}

<button id=add>ADD &lt;li&gt;</button> 
 
<ul id=myUL></ul>

來源

2017-05-06 08:08:35

與'0'一起使用'setTimeout'調用延遲添加一個類的意義是什麼，而不是僅僅在那裏添加類？我從來沒有做過前者，而且我的應用程序似乎在沒有'setTimout'包裝的情況下工作得很好。 – amn

我會推薦使用CSS動畫的簡單解決方案。您需要對代碼進行一些更改才能在之前完成的動畫之後插入下一個項目。對於這個使用此代碼替換您的for循環：

(function insertNext (position) { 

    var todosLi = document.createElement('li'); 
    var todo = todoList.itemList[position]; 

    var todoTextWithCompletion = ""; 
    if (todo.completed === true) { 
    todosLi.style.textDecoration = "line-through"; 
    } 

    todosLi.id = position; 
    todosLi.textContent = todo.todoText; 

    todosLi.appendChild(this.createDeleteButton()); 
    todosLi.appendChild(this.createToggleButton()); 

    todosLi.addEventListener('animationend', function() { 
    if (todoList.itemList.length > position + 1) { 
     insertNext(position + 1) 
    } 
    }) 

    todosUl.appendChild(todosLi); 
}.bind(this))(0)

然後，所有你需要做的就是添加CSS動畫到您的樣式：

li { 
    /* ... */ 
    animation: appear 1s forwards; 
} 

@keyframes appear { 
    from { 
    opacity: 0; background: #eee; 
    } 
    to { 
    opacity: 1; background: coral; 
    } 
}

演示：https://jsfiddle.net/Lf6t8sre/

來源

2017-05-06 08:58:13 dfsq

如何在使用Javascript創建輸出時添加轉換和轉換？

回答

相關問題