Why does the animation twitch or not fire with a given transition?

Question

css

I'd like to implement a two-pane page and have one of the panels slide smoothly off the edge of the screen.
I am using Bootstrap 5 and have divided the page into 2 col. A "pop-up" col has a width set by the "col-auto" class. I didn't come up with anything better than to "push" it by setting the class "col-1" and writing for this class "width: 0px;"

As it turned out now - the panel first sharply changes its width almost to the end, then the animation is triggered on a very small section of the width.

https://jsfiddle.net/1w79srct/

-

If css is replaced with:

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

Then there will be no animation at all and a "piece" of the first panel will be visible.

-

If html is replaced by (add class "p-0"): Then the "piece" of the first panel will disappear, but there will also be no animation at all. - If css is replaced with:
<div id="idDiv1" class="col-auto bg-warning p-0">

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

Then the animation will play as it should, but I don't want to hardcode the width of the first panel, because its content is dynamic and I would like the width to adjust itself to the content.

-

Can you please tell me how to correctly implement a smooth animation of "sliding out" from the edge of the screen?
Perhaps initially the division by 2 col was wrong?

Answer 1

Initially, no one knows the size of your block, based on this, the animation twitches. For example, you can set the width as a percentage, which is quite logical, because the table of contents cannot be larger than the body text. Also, you can add code that will calculate the width of the area upon loading and then set it for the block, which will allow the animation to be performed correctly.