Can not trasition opacity for .collapse element

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I am aware of the problem that opacity is not animated when the element has display: none.
So I tried to work around the problem with this code:

      $( '#xxx' )
        .on('show.bs.collapse',  function ( e ) {
          e.target.style.opacity= 0;
          e.target.offsetHeight;      // Force reflow
          e.target.style.opacity= 1;
        })
        .on('shown.bs.collapse', function ( e ) { e.target.style.opacity= ''; })

When an element collaped it is defined at BS as the next:

.collapse:not(.show) {
  display: none;
}

Thus when the element has .collapse it is not displayed yet.

So when I checked BS source code:

the show.bs.collapse event is called (1) before it becomes displayed (2).

To my mind the show.bs.collapse should be called when the element is actually visible. But having this I see other issue:
a) element becomes visible with default properties
b) event is called
c) event handler sets required properties
d) element blinks for a short period of time
So this is not the solution.

The possible solution could be to fire events in the next order before.show.bs.collapse then show.bs.collapse and shown.bs.collapse events.

In this case I will be able to force reflow.

Reduced test cases

I do not have one.

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

v5.3

The issue points to Bootstrap's Collapse source around the show.bs.collapse event; start by reproducing the behavior in Firefox with a minimal test case and tracing that event's ordering. Done means the event lifecycle and opacity-transition behavior are specified and covered by an appropriate regression test.