在 Css 中堆叠相同类型的多个转换

Question

我想要一些全部针对相同属性的转换相互堆叠。

举我下面的例子：如果按钮被点击多次，效果应该相加。然后，该框也应根据点击频率更快地向右移动。

const clickHandler = () => {box.classList.add("move-box");}

.box{
width: 50px;
padding: 10px;
margin-top: 50px;
border: 1px solid black;
}

.move-box {
margin-left: 100px;
transition: margin-left 0.5s linear;
}

<button onclick="clickHandler()">Go over there</button>
<div id="box" class="box">Alright</div>

Answer 1

也许您可以在您的函数中传递一个速度参数并在您的 css 中使用它，而不是使用静态值，或者可以在每次点击时增加它。

Answer 2

您可以通过 javascript

动态设置 css 值

（注意：你应该把transition: margin-left 0.5s linear;放在.box中）

const clickHandler = () => {
  const left = +box.dataset.left
  box.style.marginLeft = left + "px";
  box.dataset.left = left + 100;
}

.box {
  width: 50px;
  padding: 10px;
  margin-top: 50px;
  border: 1px solid black;
  transition: margin-left 0.5s linear;
}

<button onclick="clickHandler()">Go over there</button>
<div id="box" class="box" data-left=100>Alright</div>

在 Css 中堆叠相同类型的多个转换

Stacking multiple Transformations of the same Type in Css

html

javascript

css

css-transitions