Инициирующий переход через jquery не отображает div, хотя свойство visibility: visible было установлено

Question

У меня есть div со свойством «visibility: hidden», и я пытаюсь добавить класс с помощью Jquery для этого div, только у нового класса есть «visibility: visible» с эффектом перехода, но div не становится видимым, когда я запускаю его на JS стороне. Что касается триггера, я просто запускаю его вручную на JS стороне:

CSS классах:

.OptionsBoxContainer {
    background-color: #FFFFFF;
    border: 1px solid #5C70B1;
    border-radius: 15px;
    padding: 0px;
    margin: 10px 0px 0px 0px;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear 0.33s, opacity 0.33s linear;
}

.openBox {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

HTML Код:

<div id="OptionsBoxContainer" class="OptionsBoxContainer">
    Text
</div>

JS (Jquery) триггерный код:

$("#OptionsBoxContainer").addClass("openBox");

Демонстрация:

$("button:eq(0)").click(() => {
  $("#OptionsBoxContainer").addClass("openBox");
})
$("button:eq(1)").click(() => {
  $("#OptionsBoxContainer").toggleClass("openBox");
})

.OptionsBoxContainer {
  background-color: #FFFFFF;
  border: 1px solid #5C70B1;
  border-radius: 15px;
  padding: 0px;
  margin: 10px 0px 0px 0px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s linear 0.33s, opacity 0.33s linear;
}

.openBox {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Show Div</button><button>Toggle Div</button>
<div id="OptionsBoxContainer" class="OptionsBoxContainer">
  Text
</div>