Angular4 +动画没有持续的宽度（通过测试）

Question

请参阅以下代码：https://plnkr.co/edit/ZtbBlsVC4IwvR9u58acF?p=preview

由于某种原因，宽度会在动画结束时重置，但是颜色会相应地起作用。如何制作宽度棒？这是角度6。

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
@Component({
  selector: 'app',
  template: `

    <div [@colorToggleAnim]="state" (click)="toggleColor()" >Click Me
      <br>
      <br>
      Current State: {{state}}
    </div>

  `,
  styles: [`
    div {
      background-color: lightblue;
      color: white;
      height: 200px;
      width: 200px;
      text-align: center;
      cursor: pointer;
    }
    div.myfade{
      opacity:1;
      background-color:red;
    }
  `],
  animations: [
    trigger('colorToggleAnim', [
      state('normal', style({ 'background-color': 'lightblue',width:800 })),
      state('other', style({ 'background-color': 'red',width:300 })),
      transition('normal <=> other', animate('500ms ease'))
    ]),
     trigger('fadeAnim', [
      transition(':enter', [style({'opacity': '0'}), animate('500ms', style({'opacity': '1'}))]),
      transition(':leave', animate('500ms', style({'opacity': '0'})))
    ])
  ]
})
export class AppComponent {
  state = 'normal';
  fadeState = 'shown';

  toggleColor() {
    this.state = this.state === 'normal' ? 'other' : 'normal';
  }
  toggleVisibility() {
    this.fadeState = this.fadeState === 'shown' ? 'hidden' : 'shown';
  }
}