Dropdown fade effect

Expected behavior

Clicking on a menu dropdown inside a navbar displays or disappears the items with a fade in and out effect.

Actual behavior

The first click on the dropdown button brings up the items with a fade effect. The second click (to close the dropdown) does not cause the fade out effect.

Sample code

<header>
  <mdb-navbar SideClass="navbar navbar-expand navbar-dark blue-gradient">
    <mdb-navbar-brand>
      <a class="navbar-brand" routerLink="/">
        <img
          src="assets/icons/logo.svg"
          class="logo"
          height="45"
          alt="Logo home link"
        />
      </a>
    </mdb-navbar-brand>
    <links class="ml-auto">
      <ul class="navbar-nav">
        ...
        <li class="nav-item dropdown mx-lg-1 no-outline" mdbDropdown>
          <a
            class="nav-link rounded-circle waves-light"
            mdbDropdownToggle
            type="button"
            mdbWavesEffect
          >
            <mdb-icon fas icon="user-alt"></mdb-icon>
          </a>
          <div
            *dropdownMenu
            class="dropdown-menu dropdown dropdown-primary dropdown-menu-right"
            role="menu"
          >
            <a
              class="dropdown-item waves-light"
              mdbWavesEffect
              *ngFor="let item of profileItems"
              [routerLink]="item.route"
              routerLinkActive="active text-white"
              [routerLinkActiveOptions]="{ exact: true }"
            >
              {{ item.label }}
            </a>
            <div class="divider dropdown-divider"></div>
            <a class="dropdown-item waves-light" mdbWavesEffect href="#"
              >Logout</a
            >
          </div>
        </li>
        ...
      </ul>
    </links>
  </mdb-navbar>
</header>

Resources (screenshots, code snippets etc.)

Before clicking on the dropdown menu icon

After clicking on the dropdown icon (opened with fade effect at the opening)

After clicking on the dropdown icon to close it (no effect).