Как использовать анимацию на angular 8? - PullRequest
Новая
       9

Как использовать анимацию на angular 8?

0 голосов
/ 14 февраля 2020

Я пытаюсь использовать простую анимацию вращения. Я сделал стиль, но это происходит немедленно, без какой-либо реальной анимации.

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;

Я импортировал модуль BrowserAnimationsModule в приложении. Что я делаю не так?

1 Ответ

1 голос
/ 14 февраля 2020

У вас есть опечатка в определении перехода. Это должно быть 

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

Уведомление rotate вместо rotated.

...