在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

您可以通过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>

Answer 2

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