ThierryDD
4/16/2018 - 4:38 PM

Photos Swiping Animations - Album Component

import { 
  // ...
  trigger,
  transition,
  style,
  animate
} from '@angular/core'; // 🅰

// ...

@Component({
  // ...
  animations: [
    trigger(
      "photoAnimation", // 🅱
      [
        transition(
          "void => right", // 🅲
          [
            style({transform: 'translateX(-100%)'}),
            animate('1s ease-in-out')
          ]
        ),
        transition(
          "right => void", // 🅳
          [
            animate('1s ease-in-out', style({transform: 'translateX(100%)'}))
          ]
        ),
        transition(
          "void => left",
          [
            style({transform: 'translateX(100%)'}),
            animate('1s ease-in-out')
          ]
        ),
        transition(
          "left => void",
          [
            animate('1s ease-in-out', style({transform: 'translateX(-100%)'}))
          ]
        ),
      ]
    )
  ],
  // ...
})
export class AlbumComponent {
  // ...
}