html 旋转，移动，缩放图像动画

Posted 2021-05-11

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

@Component({
  selector: 'photo-gallery',
  templateUrl: './photo-gallery.component.html',
  styleUrls: ['./photo-gallery.component.css'],
  animations: [
    trigger("photoState", [
      state("move", style({
        transform: "translateX(-100%) translateY(50px)"
      })),
      state("enlarge", style({
        transform: "scale(1.5)"
      })),
      state("spin", style({
        transform: "rotateY(180deg) rotateZ(90deg)"
      })),
      transition("spin=>move", animate("500ms ease-out")),
      transition("*=>*", animate("500ms ease")),
    ])
  ]
})
export class PhotoGalleryComponent  {

  position: string;
  photoUrl = "http://lorempixel.com/400/200";

  changePosition(newPosition: string) {
    this.position = newPosition;
  }

}

.photo{
  margin-bottom: 100px;
  margin-left: 100px;
}

<img [src]="photoUrl" [@photoState]="position" class="photo">

<button (click)="changePosition('move')" class="button">Translate</button>
<button (click)="changePosition('spin')" class="button">Rotate</button>
<button (click)="changePosition('enlarge')" class="button">Scale</button>
<button (click)="changePosition(null)" class="button">Reset</button>