时间戳

首页 > 解决方案 > How to use animation on angular 8?

javascript - How to use animation on angular 8?

问题描述

I am trying to use a simple rotation animation. I get the style done, but it's happens immediately, without any actual animation.

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;

I imported the BrowserAnimationsModule in the app.module. What am i doing wrong?

标签： javascriptcssangularanimationtransition

解决方案

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

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

注意rotate而不是rotated.

推荐阅读