每次單擊按鈕時 CSS 遞增過渡動畫

Question

給定的

 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>

這里有一個 JS Fiddle。

我希望框的 x 位置在每次單擊按鈕時增加 20 20px 。

---

我不知道如何繼續。 我最初嘗試使用@KeyForms但這需要from和to前綴，我不能（我認為）添加變量值。 這里出現了同樣的問題，似乎我不能在 css 代碼中有一個可以遞增的變量。 我是否使用了正確的功能（ transition ）？

我也試過

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

但這似乎重復地來回移動盒子。

有沒有人有任何提示或想法？ （我正在添加 Javascript 標記，因為我懷疑這個問題可能會直接在 JS 中解決）。

Answer 1

您可以將x位置存儲在一個變量中，每次單擊增加 20 並將其應用於transform樣式屬性：

 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

繼續添加 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

使用 javascript 風格會回答你的問題。 javascript 有 CSS 樣式，如box.style.transform = 'translateX(20px)' 。 在 Javascript 中，您可以計算樣式值（當然，在 CSS 中可以通過計算更改值）。 所以我添加了一些如下所示的代碼。

 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>