@html_newbie

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

Я бы хотел реализовать двух панельную страницу и чтобы одна из панелей плавно "выдвигалась" с края экрана.
Использую 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 было ошибочным?
  • Вопрос задан
  • 79 просмотров
Решения вопроса 1
@DivineDraft
Изначально, никто не знает размеры вашего блока, исходя из этого и дергается анимация. Вы можете установить к примеру ширину в процентах, что вполне логично, ведь оглавление не может быть больше основного текста. Так же, можно добавить код, который будет вычислять ширину области при загрузке и далее устанавливать ее для блока, что позволит корректно выполнять анимацию.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы