无法以角度动画

Question

我正在尝试为加载屏幕制作动画。我想对它从空旷中打开进行一次动画处理，然后对其进行连续动画处理。我现在面临的问题是，从空打开时无法正确设置动画。

我的代码如下：

<div class="container backdrop vertical-center" *ngIf="isDisplayed" [@backdrop]>
  <div class="row">
    <div class="col-3 first-bar" [@firstBar]="firstBarAnimation"></div>
    <div class="col-3 second-bar" [@secondBar]="secondBarAnimation"></div>
    <div class="col-3 third-bar" [@thirdBar]="thirdBarAnimation"></div>
  </div>
</div>

我的ts文件如下：

import {Component, OnInit} from '@angular/core';
import {LoaderService} from '../../../services/loader.service';
import {animate, state, style, transition, trigger} from '@angular/animations';

@Component({
  selector: 'app-loader',
  templateUrl: './loader.component.html',
  styleUrls: ['./loader.component.scss'],
  animations: [
    trigger('backdrop', [
      state('display', style({
        opacity: '0.5'
      })),
      transition('void  <=> *', [
        style({
          opacity: 0
        }),
        animate(500)
      ]),
    ]),
    trigger('firstBar', [
      state('expanded', style({
        height: '46%'
      })),
      state('collapsed', style({
        height: '0'
      })),
      transition('void  => expanded', [
        style({
          height: '0'
        }),
        animate(1000)
      ]),
    ]),
    trigger('secondBar', [
      state('collapsed', style({
        height: '0'
      })),
      state('expanded', style({
        height: '70%'
      })),
      transition('void  => expanded', [
        style({
          height: '0'
        }),
        animate(500)
      ]),
    ]),
    trigger('thirdBar', [
      state('collapsed', style({
        height: '0'
      })),
      state('expanded', style({
        height: '100%'
      })),
      transition('void  => *', [
        style({
          height: '0'
        }),
        animate(500)
      ]),
    ])
  ]
})
export class LoaderComponent implements OnInit {
  isDisplayed: boolean = true;
  firstBarAnimation = 'expanded';
  secondBarAnimation = 'expanded';
  thirdBarAnimation = 'expanded';

  constructor(private loaderSvc: LoaderService) {
  }

  ngOnInit() {
    this.loaderSvc.isLoaderDisplayed.subscribe(isDisplayed => {
      this.isDisplayed = isDisplayed;
    });
  }
}

我面临的问题是 firstBar 动画

我的github网址是https://github.com/vibhorgoyal18/mydesq-hr.git