如何使用角度动画sequence()方法在一个动画完成后才触发动画？

import { trigger, state, style, transition, animate, sequence } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('yourAnimationTrigger', [
      state('start', style({
        // 定义起始状态的样式
      })),
      state('end', style({
        // 定义结束状态的样式
      })),
      transition('start => end', [
        // 定义从起始状态到结束状态的过渡动画
      ])
    ])
  ]
})

import { Component, OnInit } from '@angular/core';
import { trigger, state, style, transition, animate, sequence } from '@angular/animations';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css'],
  animations: [
    trigger('yourAnimationTrigger', [
      state('start', style({
        // 定义起始状态的样式
      })),
      state('end', style({
        // 定义结束状态的样式
      })),
      transition('start => end', [
        // 定义从起始状态到结束状态的过渡动画
      ])
    ])
  ]
})
export class YourComponent implements OnInit {

  animationState: string;

  constructor() { }

  ngOnInit() {
    this.animationState = 'start';
  }

  playAnimation() {
    this.animationState = 'start';
    // 使用sequence()方法定义两个动画的顺序
    sequence([
      animate('500ms', style({
        // 定义第一个动画的样式
      })),
      animate('500ms', style({
        // 定义第二个动画的样式
      }))
    ]).start(() => {
      this.animationState = 'end';
    });
  }

}