javascript - 使卡片缓慢向左拉伸(stretch)

我有一个div元素，其宽度在内部为class arrow-card，还有另一个div为class箭头-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">&nbsp;</div>
</div>

关于javascript - 使卡片缓慢向左拉伸(stretch)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58676828/