element-angular/src/carousel/animations.ts at master · unix/element-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { AnimationTriggerMetadata, trigger, state, style, animate, transition } from '@angular/animations'

export const carouselBtnLeftAnimation: AnimationTriggerMetadata = trigger(
  'carouselBtnLeftAnimation', [
    state('*', style({
      opacity: 0,
      visibility: 'hidden',
      transform: 'translate3D(-15px, -50%, 0)',
    })),
    state('false', style({
      opacity: 0,
      visibility: 'hidden',
      transform: 'translate3D(-15px, -50%, 0)',
    })),
    state('true', style({
      opacity: 1,
      transform: 'translate3D(0, -50%, 0)',
      visibility: 'inherit',
    })),
    transition('* <=> *', animate(`250ms ease-out`)),
  ])

export const carouselBtnRightAnimation: AnimationTriggerMetadata = trigger(
  'carouselBtnRightAnimation', [
    state('*', style({
      opacity: 0,
      visibility: 'hidden',
      transform: 'translate3D(15px, -50%, 0)',
    })),
    state('false', style({
      opacity: 0,
      visibility: 'hidden',
      transform: 'translate3D(15px, -50%, 0)',
    })),
    state('true', style({
      opacity: 1,
      transform: 'translate3D(0, -50%, 0)',
      visibility: 'inherit',
    })),
    transition('* <=> *', animate(`250ms ease-out`)),
  ])