Javascript 如何在angular 8上使用动画？

我正在尝试使用一个简单的旋转动画。我完成了风格，但它立即发生，没有任何实际的动画

HTML:

我在app.module中导入了BrowserAnimationsModule。

---

我做错了什么？

您在转换定义中有一个输入错误。应该是

  transition('rotate => straight', animate('400ms ease-out')),
  transition('straight => rotate', animate('400ms ease-in'))

请注意

旋转

而不是

旋转

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

@Component({
  selector: 'app-info-window',
  animations: [
    trigger('rotation', [
      state('straight', style({ transform: 'rotate(0)' })),
      state('rotate', style({ transform: 'rotate(180deg)' })),
      transition('rotated => straight', animate('400ms ease-out')),
      transition('straight => rotated', animate('400ms ease-in'))
    ]),
  ],
  templateUrl: './info-window.component.html',
  styleUrls: ['./info-window.component.css']
})
export class InfoWindowComponent implements OnInit {
  liked = false;

  transition('rotate => straight', animate('400ms ease-out')),
  transition('straight => rotate', animate('400ms ease-in'))