如何在 Angular 8 上使用动画？答案

【问题标题】：How to use animation on angular 8?如何在 Angular 8 上使用动画？
【发布时间】：2020-05-30 03:58:17
【问题描述】：

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

HTML：

<img class="icon" [@rotation]="liked? 'rotate' : 'straight'" (click)="liked = ! liked" src="mySource"/>

TS：

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;

我在 app.module 中导入了 BrowserAnimationsModule。我做错了什么？

【问题讨论】：

标签： javascript css angular animation transition

【解决方案1】：

您在转换定义中有错字。应该是

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

注意rotate 而不是rotated。

【讨论】：