Angular анимаций с входом и выходом - PullRequest
Новая
       40

Angular анимаций с входом и выходом

0 голосов
/ 23 апреля 2020

У меня следующий сценарий: я пытаюсь создать двухуровневое меню с angular. Первый уровень всегда отображается. Второй уровень открывается / закрывается, когда я щелкаю родительский элемент. И я хочу анимировать подменю.

Мой код до сих пор выглядит так: 

<div *ngIf="isFolder || isItem" class="menu-item" [ngClass]="{ 'menu-open': isMenuOpen, 'disabled': !isSelected, 'open': isOpened }">
  <div class="content" tabindex="0" (click)="click($event)">
    <div class="icon" title="{{ (!isMenuOpen ? item.properties.textKey : '') | translate }}">
      <fa-icon [icon]="item.properties.icon" [fixedWidth]="true"></fa-icon>
    </div>
    <span class="text" [translate]="item.properties.textKey"></span>
    <div *ngIf="isFolder" class="chevron">
      <fa-icon [icon]="['scs', 'ui-menu-opened']" size="xs"></fa-icon>
    </div>
  </div>
  <ul *ngIf="isOpened" @openClose class="sub-menu">
    <ng-container *ngFor="let subItem of item.subMenu">
      <li *ngxPermissionsOnly="subItem.permissions">
        <cockpit-menu-item [item]="subItem"></cockpit-menu-item>
      </ng-container>
    </div>
  </ul>
</div>

@Component({
  selector: 'cockpit-menu-item',
  templateUrl: './menu-item.component.html',
  styleUrls: ['./menu-item.component.scss'],
  animations: [
    trigger('openClose', [
      transition(':enter', [
        style({ height: '0px' }),
        animate('2s', style({ height: '*' })),
      ]),
      transition(':leave', [
        animate('2s', style({ height: '0px' }))
      ])
    ])
  ]
})
export class MenuItemComponent extends AbstractUnsubscribeComponent implements OnInit {

Соответствующая часть: 

<ul *ngIf="isOpened" @openClose class="sub-menu">
    <ng-container *ngFor="let subItem of item.subMenu">

Отпуск анимация работает, как и ожидалось, но нет. Кажется, что с использованием * ngFor контент создается в точке, где оценка высоты уже была сделана. Таким образом, подменю остается закрытым до тех пор, пока не истечет время анимации, а затем сразу появится.

Я пробовал следующее, и оно работает: * Замените * ngFor некоторым содержанием stati c. * Используйте фиксированную высоту вместо "*" в анимации.

Но так как элементы могут различаться, оба подхода на самом деле неосуществимы.

Любые идеи?

Thx Маркус

PS .: Поскольку некоторые сторонние библиотеки, которые мы используем, все еще не работают с angular 9, я все еще с angular 8 и включенным плющом.

...