Почему дёргаться или не срабатывает анимация с заданным transition?

Question

[html_newbie]

Я бы хотел реализовать двух панельную страницу и чтобы одна из панелей плавно "выдвигалась" с края экрана.
Использую Bootstrap 5 и поделил страницу на 2 col. У "выдвигающегося" col ширина задана классом "col-auto". Я не придумал ничего лучше как "задвигать" его задав класс "col-1" и прописав для этого класса "width: 0px;"

Как сейчас получилось - панель сначала резко меняет свою ширину почти до конца, затем срабатывает анимация на очень небольшом участке ширины.

https://jsfiddle.net/1w79srct/

-

Если css заменить на:

#idDiv1 {
  transition: all 500ms;
}
.col-1 {
  width: 0px;
}

То анимации не будет вовсе и будет виден "кусок" первой панели.

-

Если html заменить на (добавить класс "p-0"):
<div id="idDiv1" class="col-auto bg-warning p-0">
То "кусок" первой панели пропадет, но анимации так же не будет вовсе.

-

Если css заменить на:

#idDiv1 {
  transition: all 500ms;
}
.col-1 {
  padding: 0px;
  width: 0px;
}
.col-auto {
  width: 300px;
}

То анимация будет воспроизводиться как нужно, но я бы не хотел жестко задавать ширину для первой панели, потому что ее содержимое динамическое и хотел бы чтобы ширина сама подстраивалась под содержимое.

-

Подскажите пожалуйста, как правильно реализовать плавную анимацию "выдвижения" с края экрана?
Возможно изначально деление на 2 col было ошибочным?

Answer 1

[DivineDraft]

Изначально, никто не знает размеры вашего блока, исходя из этого и дергается анимация. Вы можете установить к примеру ширину в процентах, что вполне логично, ведь оглавление не может быть больше основного текста. Так же, можно добавить код, который будет вычислять ширину области при загрузке и далее устанавливать ее для блока, что позволит корректно выполнять анимацию.

Comments

[html_newbie]

Спасибо вам за ответ.

установить к примеру ширину в процентах

Я бы как раз хотел минимизировать ширину первой панели.

код, который будет вычислять ширину области при загрузке и далее устанавливать ее для блока

Спасибо вам за пример кода. Подскажите пожалуйста, как должен выглядеть код, чтобы изначально первая панель была свернута? Если ее просто свернуть через класс "col-1" то будет уже невозможно высчитать ширину.

[DivineDraft]

Не силен в js, но по сути, Вам изначально нужно узнать ширину, затем накинуть ее, затем скрыть блок. Чтобы анимация не мешала красоте, накинем ее после выполнения всех этих действий и в принципе получим это:

[html_newbie]

DivineDraft, Еще раз спасибо вам.