如何解决在CSS中堆叠相同类型的多个转换
我希望所有针对同一个属性的转换相互叠加。
以下面的示例为例:如果多次单击该按钮,则效果应累加。然后,该框还应该根据点击次数向右移。
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>
解决方法
也许您可以在函数中传递速度参数,然后在css中使用它,而不是使用静态值,或者每次单击都会增加它。
,您可以通过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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。