Transition nie chce działać przy sass

Witam,
Piszę element, który ma pokazywac się dopiero po kilknięciu w element strony. Pokazuje się i znika dzięki klasie active zrobionej w css. (klasa active daje nam display:block oraz wskazuje, gdzie ma być pokazany element.)
Jesli chcę zrobić równiez animację za pomoca transition, pomyślałam że również ją wpiszę w klasę active, ale nie działa. To wygląda, jakby w ogóle css ignorował mu element transition, jakikolwiek.
css wygląta tak:

div .bms-dropdown-content {
  max-height: calc(100vh - 64px);
  display: none;
  position: relative;
  background-color: #ffffff;
  min-height: 64px;
  height: 100%;
  left: 0;
  z-index: 1;
  color: black !important;
  transition: opacity 1s ease-out;
  opacity: 0;
  height: 0;
  overflow: hidden; }
div .bms-dropdown-content.active {
  display: block !important;
  opacity: 1;
  height: auto;
  transition-property: all;
  transition-delay: 5s;
  transition-duration: 1s; }

Czemu to całe transition nie działa?

Display nie można animować, jak usuniesz display z obu reguł to transition normalnie działa. Display można zastąpić visibility (ale wtedy element zajmuje miejsce, które mu przysługuje w dokumencie, mimo, że nie jest widoczny).
Pozycjonowanie absolutne (zamiast relative) powinno naprawić ten problem, bo wtedy element zostaje wyjęty z biegu dokumentu. Wydaje mi się też, że można to jakoś obejść za pomocą keyframes lub bardziej przemyślanej klasy, którą się zmienia js'em.

div.bms-dropdown-content usuń tą spację, którą masz w środku w swoim kodzie pomiędzy divem a klasą.
Reguły do transition wystarczą tylko w div.bms-dropdown-content. Możesz to wszystko zmieścić w jednej linijce: transition: property duration timing_function delay;
Tyle ode mnie, jeśli to dobrze zrozumiałam.