Angular2, как анимировать плавный ниспадающий переход для навигационных ссылок?

Question

У меня есть панель навигации с несколькими ссылками, поэтому при наведении курсора на каждую ссылку сразу под панелью навигации появляется div.

Проблема в том, что анимация слишком внезапная, но мне хотелось бы иметь 600 мс упростить анимацию раскрывающегося перехода.

Вот код HTML:

<ng-container [@changeDivSize]=currentState>
  <li [hidden]="isAnyMenuOpened" class="nav-item dropdown" *ngFor="let menu of menuItemsParsed" (mouseover)="openMenu(menu)" (mouseleave)="closeMenu(menu)">
    <a (click)="navigateMain(menu.id)" class="nav-link dropdown-toggle">
      Shop {{ menu.name }}
    </a>
    <div class="dropdown-menu" [ngStyle]="{display: menu.isOpened ? 'block' : 'none'}">
      <div class="drop-item-wrap">
        <div class="drop-left">
          <div class="drop-item" *ngFor="let submenu of menu.submenu">
            <div class="drop-inner-wrap mobile-submenu">
              <ng-container *ngFor="let item of submenu">
                <a (click)="navigate(item.id)" class="dropdown-item">{{ item.name }}</a>
              </ng-container>
            </div>
          </div>
        </div>
        <div class="drop-right">
          <div class="drop-item">
            <a class="dropdown-item visit-cosstore text-uppercase" href="https://cosstores.com" target="_blank"><span
              class="md-visible">Subscribe</span>Visit <u>cosstores.com</u></a>
          </div>
        </div>
      </div>
    </div>
  </li>

  <div class="drop-background" [hidden]="!isAnyMenuOpened" [@changeDivSize]=currentState></div>
  <!--   <div class="drop-background" *ngIf="isAnyMenuOpened" [@changeDivSize]=currentState></div> -->
</ng-container>

Некоторые части кода для краткости опущены.

Код Component.ts :

import { OnDestroy, Input, Output, EventEmitter, OnChanges } from '@angular/core';
import { Component, OnInit } from '@angular/core';
import * as _ from 'lodash';
import { DeviceDetectorService } from 'ngx-device-detector';
import {
  trigger,
  state,
  style,
  animate,
  transition,
} from '@angular/animations';

@Component({
  // tslint:disable-next-line:component-selector
  selector: 'ul[app-category-nav-desktop]',
  templateUrl: './category-nav-desktop.component.html',
  styleUrls: ['./category-nav-desktop.component.scss'],
  animations: [
    trigger('changeDivSize', [
      state('initial', style({
        height: '0%',
        width: '0%'
      })),
      state('final', style({
        backgroundColor: 'beige',
        height: '100%',
        width: '100%'
      })),
      transition('initial => final', animate('600ms')),
      transition('final => initial', animate('600ms'))
    ])
  ]
})
export class CategoryNavDesktopComponent implements OnInit, OnDestroy, OnChanges {
  navigationSubscription: any;
  menuItemsParsed: any;
  isAnyMenuOpened = false;
  @Input() menuItems: any;
  @Output() onNavigate: EventEmitter<any> = new EventEmitter();

  currentState = 'initial';

  constructor(){}

  openMenu(menu) {
    this.currentState = this.currentState === 'initial' ? 'final' : 'initial';

    this.menuItemsParsed[menu.index].isOpened = true;
    this.isAnyMenuOpened = true;
  }

  closeMenu(menu) {
    this.currentState = this.currentState === 'initial' ? 'final' : 'initial';

    this.menuItemsParsed[menu.index].isOpened = false;
    this.isAnyMenuOpened = false;
  }

  ngOnInit() {}

  ngOnDestroy() {
    this.navigationSubscription.unsubscribe();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (typeof (changes as any).menuItems !== 'undefined') {
      this.menuItemsParsed = (changes as any).menuItems.currentValue.map((s, k) => ({
        ...s,
        index: k,
        isOpened: false
      }));
    }
  }
}

и S CSS код

.dropdown-menu {
        width: 100%;
        border-radius: 0px;
        background: rgba(235, 231, 221, 0.85);
        border: none;
        margin: 0px;
        padding: 0px;
        min-height: 50%;
        margin-top: -15px;

        .drop-item-wrap {
          padding: 45px 0px;
          background: rgba(235, 231, 221, 1);

          @include displayFlex;
          @include flexWrap(wrap);

          .drop-left {
            width: calc(100% - 240px);

            @include displayFlex;
            @include flexWrap(wrap);
          }

          .drop-right {
            padding-right: 20px;
            width: 240px;
          }

          .drop-item {
            margin: 0 28px;
            width: 125px;
            h3 {
              font-size: 11px;
              font-family: $fontGillSansMTProMedium;
              text-transform: uppercase;
              margin-bottom: 5px;
              color: $colorDark;
            }
          }
        }
        .dropdown-item {
          padding: 0px;
          font-size: 13px;
          font-family: $fontGillSansMTProMedium;
          color: $colorDark;
          letter-spacing: 0.02em;
          line-height: 1.77;
          font-weight: 500;