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;
}
}