我有一个 div 元素,宽度内有 arrow-card 类,还有另一个 div 类 arrow-body 它将组成一张卡片,所以我希望卡片在我单击时立即向左慢慢增加宽度它 从右到左的过渡。
.arrow-body{
box-shadow: 0 4px 8px 0 rgb(0,0,0,0.3);
width: 0px;
top: 130px;
position: relative;
display: none;
}
<div class="arrow-card">
<div class="arrow-body"></div>
</div>
if(window.getComputedStyle(arrow_body).
getPropertyValue("padding")==="0px"){
arrow_body.style.display = "initial";
arrow_body.style.transition = "0.2s";
arrow_body.style.width = "60px"
}else{
arrow_body.style.display = "none";
arrow_body.style.padding = "0px"
}
最佳答案
问题 1:如果您将显示从无 -> 初始更改,您将不会得到任何转换
问题2:元素没有高度,反正你也看不到
修复 1:将显示更改为初始显示,添加过渡,然后在 setTimeout(持续时间为零)中更改元素的宽度
修复 2:为元素提供一些高度 或一些内容 从而赋予它高度
let arrow_body = document.querySelector('.arrow-body');
if (window.getComputedStyle(arrow_body).getPropertyValue("display") === "none") {
arrow_body.style.display = "block";
arrow_body.style.transition = "0.2s";
setTimeout(() => arrow_body.style.width = "60px");
} else {
arrow_body.style.display = "none";
arrow_body.style.padding = "0px"
}
.arrow-body {
box-shadow: 0 4px 8px 0 rgb(0, 0, 0, 0.3);
width: 0px;
top: 130px;
position: relative;
display: none;
}
<div class="arrow-card">
<div class="arrow-body"> </div>
</div>
关于javascript - 让卡片慢慢向左拉伸(stretch),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58676828/