Accordion - add/remove loading class on css transition (timing issue)

Question

I'm building an accordion where I'm toggling each accordion-fold on click. The javascript toggles a class while the css takes care of the animation.

When the accordion-fold is transitioning (expands or contracts) I want to set all the accordion-folds opacity to 1. When the css transition is complete I want to reset the opacity to the previous value but with a slight delay to avoid any flicker.

I've been trying to figure out how to do this using transitionend and setTimeout but the timing has been totally off. Any ideas appreciated. My code so far:

HTML:

<div class="accordion">

    <div class="accordion__fold">
        <img src="img/concept.jpg" alt="Concept" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--concept"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/lightbulb.svg" alt="Lightbulb">
            <h3 class="accordion__fold-heading">Concept</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

    <div class="accordion__fold">
        <img src="img/ux.jpg" alt="UX/UI" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--ux"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/penn.svg" alt="Penn">
            <h3 class="accordion__fold-heading">UX/UI</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

    <div class="accordion__fold">
        <img src="img/code.jpg" alt="Code" class="accordion__fold-image">
        <div class="accordion__fold-overlay accordion__fold-overlay--code"></div>
        <div class="accordion__fold-inner">
            <img class="accordion__fold-icon" src="img/icons/code.svg" alt="Code">
            <h3 class="accordion__fold-heading">Code</h3>
            <p class="accordion__fold-sub-heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
        </div>
        <button class="btn accordion__fold-btn">Read more</button>
    </div>

</div>

CSS:

.accordion__fold--active {
    flex-grow: 8;
}

.accordion__fold-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  transition: all 0.25s ease-in-out;
}

.accordion--loading .accordion__fold-overlay {
  opacity: 1;
}

Javascript:

const $accordion = $('.accordion');
const $folds = $('.accordion__fold');

$folds.each((index, fold) => {
    const $this = $(fold);

    $this.on('click', () => {

        // toggle active fold
        $folds.not($this).removeClass('accordion__fold--active');
        $this.toggleClass('accordion__fold--active');

        // set loading class
        $accordion.addClass('accordion--loading');

        $this.on('transitionend', () => {

            // remove loading class (timing is often off)
            setTimeout(() => {
                $accordion.removeClass('accordion--loading');
            }, 250);
        });
    });
});