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 here.

我希望框的 x 位置在每次单击按钮时增加 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

继续添加使用 javascript 样式

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 样式可以回答您的问题。像 box.style.transform = 'translateX(20px)' 一样，javascript 有 CSS 样式。在 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>

CSS 每次点击按钮时增加过渡动画

CSS incrementing transition animation on every button click

javascript

css

css-transitions

css-transforms