How can I add transitions and transform when creating output with Javascript?

Question

I am appending output to a ul element using li 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 li elements.

I want to transform li elements as they appear from Javascript in the DOM.

Vanilla Javascript is preferred.

What I have, 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);
    }
}

I want to transform li tags or you want us to transform your LI tags — Roko C. Buljan
– Roko C. Buljan, Commented May 6, 2017 at 7:56
@RokoC.Buljan i am not asking for direct answers man...just tell me something to work on..i'll make my way from there.. — Swastik Sharma
– Swastik Sharma, Commented May 6, 2017 at 7:59
I am appending my output to ul tag using li tag so why not just show that code here? So people willing to help can move on from there ... did you read How to create a Minimal, Complete, and Verifiable example? — caramba
– caramba, Commented May 6, 2017 at 8:03
thanks @caramba for that...i didnt read it before, u taught me something valuable . I've edited my post can you tell me if something's still missing... :-) — Swastik Sharma
– Swastik Sharma, Commented May 6, 2017 at 8:24
Here we go. Next time post your code first. Much simpler to give proper answer tailored for your situation. — dfsq
– dfsq, Commented May 6, 2017 at 8:27

Roko C. Buljan · Accepted Answer · 2017-05-06 08:08:35Z

1

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>

answered May 6, 2017 at 8:08

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Armen Michaeli Over a year ago

What is the significance of using a setTimeout call with 0 for delay to add a class, as opposed to just adding the class then and there? I never did the former, and my applications seem to work just fine without the setTimout wrapping things.

dfsq · Accepted Answer · 2017-05-06 08:58:13Z

I would recommend simple solution with CSS animations. You will need a little change to your code to insert next item after animation of the previous completed. For this replace your for loop with this code:

(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)

Then all you need to do is add CSS animation into your styles:

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

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

Demo: https://jsfiddle.net/Lf6t8sre/

Collectives™ on Stack Overflow

How can I add transitions and transform when creating output with Javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related