CSS incrementing transition animation on every button click

Question

Given

 var box = document.querySelector('.box'); document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event.target.id === "button") { box.classList.add('move'); } });

 .box { width: 100px; height: 100px; background-color: #000; transition: transform 1s; } .move { transform: translateX(20px); }

 <div class="box"></div> <button id="button">button</button>

with a JS Fiddle here .

I want the box's x-position to increment by 20px on every button click.

---

I am not sure how to proceed. I initially tried using @KeyForms but that requires the from and to prefixes, on which I cannot (I think) add a variable value. Same issue arises here, it seems I cannot have a variable in the css code which I can increment. Am I using the correct function at all ( transition ) ?

I also tried

if(event.target.id === "button") {
    if(!box.classList.contains('open')){
        box.classList.add('open');
    }else {
        box.classList.remove('open');
    }
  }

but that seems to move the box back and forth repetitively.

Does anyone have any tips or ideas? (I am adding the Javascript tag, since I suspect this problem may potentially be solved in JS directly).

Answer 1

You can store the x position in a variable, increment by 20 every click and apply it to the transform style property:

 var x = 0, box = document.querySelector('.box'); button.addEventListener('click', function() { x += 20, box.style.transform = `translateX(${x}px)`; })

 .box { width: 100px; height: 100px; background-color: #000; transition: 1s; }

 <div class="box"></div> <button id="button">button</button>

Answer 2

Just keep on adding Using javascript style

 var button = document.querySelector('#button'); button.onclick = function () { document.querySelector('.box').style.transform += "translateX(20px)"; };

 .box { width: 100px; height: 100px; background-color: #000; transition: transform 1s; }

 <div class="box"></div> <button id="button">button</button>

Answer 3

Using javascript style would answer your question. There is CSS style for javascript like box.style.transform = 'translateX(20px)' . In Javascript you can calculate styles values(Of course in CSS changing values with calculating is possible). So I added some codes like below.

 var box = document.querySelector('.box'); let cnt = 0; document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event.target.id === "button") { console.log(box.style.transform) cnt++; console.log(cnt) box.style.transform = `translateX(${20 * cnt}px)`; } });

 .box { width: 100px; height: 100px; background-color: #000; transition: transform 1s; } .move { transform: translateX(20px); } .move1 { transform: translateX(-20px); }

 <div class="box"></div> <button id="button">button</button>