aboutsummaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/animates.ts
blob: cde7e568558e43b689d7dc09a130c43b38266cde (plain)
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
42
import { trigger, state, style, animate, transition } from '@angular/animations';

// 路由动画
export const slideToRight = trigger('routerAnimate', [
    // 定义void表示空状态下
    state('void', style({ position:'fixed', zIndex:'-1' })), //不明白为啥要加定位出场动画才生效
    // * 表示任何状态
    state('*', style({ })),
    // 进场动画
    transition(':enter', [
        style({transform: 'translateX(-100%)'}),
        animate('.5s ease-in-out')
    ]),
    // 出场动画
    transition(':leave', [
        animate('.5s ease-in-out',  style({transform: 'translateX(100%)'}) )
    ])
]);
// 详情页显示隐藏动画
export const showHideAnimate = trigger('showHideAnimate', [
    state('show', style({
      transform: 'scale(1)',
      display:'block',
    })),
    state('hide', style({
      transform: 'scale(0)',
      display:'none'
    })),
    transition('show => hide', animate('300ms ease-in')),
    transition('hide => show', animate('300ms ease-out'))
]);
// 详情页显示隐藏动画
export const slideUpDown = trigger('slideUpDown', [
    state('down', style({
        height: "*"
    })),
    state('up', style({
        height: "0"
    })),
    transition('down => up', animate('300ms ease-in')),
    transition('up => down', animate('300ms ease-out'))
]);