我想要一些转换,这些转换的目标都是相同的属性,以堆叠在彼此的顶部。
给我下面的例子:如果按钮被点击多次,效果应该会累加。然后,根据点击的频率,方框应该更快地向右移动。
null
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>
null
可以通过javascript动态设置css值
(注意:您应该在.box
中放置transition:margine-left 0.5s linear;
)
null
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中使用它,而不是使用静态值,或者在每次点击时递增它。