Сделайте карту медленно растянуть влево

Question

У меня есть элемент 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"
}

Answer 1

Проблема 1: если вы измените отображение с none -> initial, вы не получите никаких переходов
Проблема 2: у элемента нет высоты, поэтому вы все равно его не увидите

Исправленодля 1: изменить отображение на начальное, добавить переход, затем в setTimeout (с нулевой продолжительностью) изменить ширину элемента

Исправить для 2: дать элементу 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">&nbsp;</div>
</div>