transition выполняется в отладчике, но не выполняется без него

Есть такая менюшка:

    <div class="menu-item d-flex justify-content-end align-items-center">
      <button class="menu-button" id="servises">Servises</button>
      <div class="lamp" id="servisel-lamp" > </div>
    </div>
    <div class="menu-item d-flex justify-content-end align-items-center">
      <button class="menu-button" id="portfolio">Portfolio</button>
      <div class="lamp" id="portfolio-lamp" > </div>
    </div>
    <div class="menu-item d-flex justify-content-end align-items-center">
      <button class="menu-button" id="contacts">Contacts</button>
      <div class="lamp" id="servises-lamp" > </div>
    </div>
    <div class="menu-item d-flex justify-content-end align-items-center">
      <a class="menu-toggler d-flex justify-content-center align-items-center" type="button" id="menuToggler" >
        <div class="menu-icon d-flex"></div>
      </a>
      <div class="lamp"></div>
    </div>
  </section>

По идее должно быть так: при нажатии на "кнопку" в теге </а> другие кнопки медленно гаснут, и при повторном нажатии появляются с мерцанием по функции cubic-bezier(.11,1.73,0,-0.42). НО при повторном нажатии, когда они должны появиться, они появляются просто так, без видимого перехода, НО если просмотреть это в отладчике, то все работает как надо. Вопрос что не так. переход сам по себе работает прекрасно, если не скрывать кнопки подобным методом, но тогда на них можно кликнуть, а это нехорошо.

Вот less:

.menu {
    position: fixed;
    top: 50%;
    transform: translateY(-37%);
    //right: 0;
    &-item {
        display: block;
        margin-bottom: 5px;
        width: 19.8rem;
        .menu-button {
            border: none;
            background-color: transparent;
            perspective: 2rem;
            box-sizing: content-box;
            height: 4rem;
            width: 97%;
            padding: 0;
            opacity: 80%;
            .RollboxBold();
            color: @star;
            font-size: 2rem;
            transition: opacity 1.7s cubic-bezier(.11,1.73,0,-0.42);    
            &::before {
                content: '';
                z-index: -1;
                position: absolute;
                top: 50%;
                right: -1rem;
                transform: translateY(-50%) rotateY(1.8deg);
                height: inherit;
                width: inherit;
                opacity: 50%;
                background-color: @star;
                filter: blur(0.5rem) drop-shadow(0 0 0.6rem @star-shadow);
            }
        }
    }
}

и JS:

$(function() {
    var buttons = document.getElementsByClassName("menu-button");
    for (i = 0; i < buttons.length; ++i) {
        buttons[i].addEventListener("transitionend", function() {
            if (menu.classList.contains("closed")) {                
                this.classList.toggle("hidden");
            }
        }, false);
    }
});

$("#menuToggler").click(function() {
    var menu = document.getElementById("menu");
    var buttons = document.getElementsByClassName("menu-button");

    if (menu.classList.contains("closed")) {
        for (i = 0; i < buttons.length; ++i) {
            buttons[i].classList.toggle("hidden");
        }
        menu.classList.toggle("closed");
    } else {
        menu.classList.toggle("closed");
    }
})