如何在angular 5动画中正确定义过渡？

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

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

@Component({
  selector: 'app-your-component',
  templateUrl: 'your-component.html',
  animations: [
    trigger('yourAnimationTrigger', [
      state('initial', style({
        // 定义初始状态的样式
      })),
      state('final', style({
        // 定义最终状态的样式
      })),
      transition('initial => final', animate('duration-in-ms')),
      // 定义从初始状态到最终状态的过渡效果
      transition('final => initial', animate('duration-in-ms'))
      // 定义从最终状态到初始状态的过渡效果
    ])
  ]
})

<div [@yourAnimationTrigger]="currentState"></div>

this.currentState = this.currentState === 'initial' ? 'final' : 'initial';