角度动画：样式状态和过渡

Question

我有一个想要动画的div。 这个div有多个状态，每个状态都与背景颜色相关联，我希望转换是平滑的。此外，我希望div在状态改变期间旋转。

我设法让旋转正确，但后来失去了色彩过渡。我怎样才能同时获得两者？

这是一个stackBlitz来说明我的问题： https://angular-adicy6.stackblitz.io

这是背后的动画设置：

@Component({
  selector: 'select-value-binding-example',
  templateUrl: 'select-value-binding-example.html',
  styleUrls: ['select-value-binding-example.css'],
  animations: [
    trigger('animateColor', [
      state('red', style({ backgroundColor: 'red' })),
      state('yellow', style({ backgroundColor: 'yellow' })),
      state('green', style({ backgroundColor: 'green' })),

      transition('* => *', [
        animate('500ms ease', keyframes([
          style({ transform: 'rotate(0)', offset: 0 }),
          style({ transform: 'rotate(360deg)', offset: 1.0 }),
        ]))
      ]),
    ])
  ]
})