title: How can I add transitions and transform when creating output with Javascript?
body: <p>I am appending output to a <code>ul</code> element using <code>li</code> elements. I am able to generate the output as desired but I have no idea on how to use transitions and transform, as Javascript is creating those <code>li</code> elements.</p>
  
  <p>I want to transform <code>li</code> elements as they appear from Javascript in the DOM.</p>
  
  <p>Vanilla Javascript is preferred.</p>
  
  <p>What I have, HTML:</p>
  
  <pre><code>&lt;div class="add"&gt;    
  &lt;input type="text" id="addTodoTextInput" placeholder="Add Task Here" onkeydown="handlers.addTodo()" &gt;  &lt;!-- input text field to add &lt;li&gt; --&gt;
  &lt;button onclick="search()"&gt; &lt;img src="add.png" height="20" width="20" alt=""&gt; &lt;/button&gt; &lt;!-- button to add li --&gt;    
  &lt;/div&gt;
  &lt;ul class="result"&gt;
      &lt;!-- output generated with JavaScript will be appended here --&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>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);
      }
  }
  </code></pre>