让卡片缓慢向左伸展
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让卡片缓慢向左伸展相关的知识，希望对你有一定的参考价值。
我有一个div元素，其宽度在内部为class箭头卡，还有另一个div为class箭头，其主体将组成一张卡，因此，我希望该卡在单击后立即向左缓慢增加宽度从右到左的过渡。
.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：给元素一些height或一些content赋予它height
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>以上是关于让卡片缓慢向左伸展的主要内容，如果未能解决你的问题，请参考以下文章