Why do .collapse components transition the width/height properties?

[Rabadash8820]

I've been trying to get a side-menu working with the new .collapse-horizontal component, but I'm having some trouble getting a smooth expand transition. The only similar issue that I could find here was #33823, which was closed without an answer. From googling around, I found these two articles that essentially start with the same insight: animating anything other than CSS transform or opacity is gonna cause a lot of reflows in the browser and make animations slow/choppy. The second article (from 2020) specifically recommends against animating width and height. I was surprised to find, then, that the Bootstrap collapse classes are doing just this:

/* dist/css/bootstrap.css */
.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}
.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

So my question is, why doesn't Bootstrap transition the transform in some way (presumably scale)? If this was a conscious decision, can someone explain why the side menu in the JSFiddle in #33823 appears choppy upon expanding, and/or how to get around this? It's basically the same issue that I'm seeing...