Transition doesn't happen when Tailwind classes are changed by Stimulus

Question

When I change a Tailwind class with Stimulus, the styling updates, but there is no transition:

Here is my JavaScript:

import { Controller } from '@hotwired/stimulus';                                                                                                                                                                                                     

export default class extends Controller {
    static targets = ['menu'];                                                                                                                                                                                                                       

    toggle() {
        if (this.menuTarget.classList.contains('hidden')) {
            this.menuTarget.classList.remove('hidden');                                                                                                                                                                                              
            this.menuTarget.classList.remove('opacity-0');                                                                                                                                                                                           
            this.menuTarget.classList.remove('-translate-y-10');                                                                                                                                                                                     
            return;                                                                                                                                                                                                                                  
        }
        this.menuTarget.classList.add('hidden');                                                                                                                                                                                                     
        this.menuTarget.classList.add('opacity-0');                                                                                                                                                                                                  
        this.menuTarget.classList.add('-translate-y-10');                                                                                                                                                                                            
    }
}

And here is the HTML:

<div data-controller="hour-menu">
  <div data-action="click->hour-menu#toggle" class="rounded-full p-2 transition ease-out hover:bg-gray-300">
    <svg class="...">...</svg>
  </div>
  <div class="rounded-md bg-white absolute shadow-md py-1 hidden transition ease-in-out" data-hour-menu-target="menu">...</div>
</div>

The hidden class is preventing the transition, but if I remove it, the menu items could still be clicked, even when the menu was closed (the menu would only be invisible).

Is there any way to fix this?

(The hidden class sets display:none)