From de9d2e95b43991fccee342ebed03b006f6fed844 Mon Sep 17 00:00:00 2001 From: zhangab Date: Tue, 23 Oct 2018 11:32:03 +0800 Subject: Build AngularJs component for usecase-ui Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab --- usecaseui-portal/src/app/animates.ts | 42 ++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 usecaseui-portal/src/app/animates.ts (limited to 'usecaseui-portal/src/app/animates.ts') diff --git a/usecaseui-portal/src/app/animates.ts b/usecaseui-portal/src/app/animates.ts new file mode 100644 index 00000000..cde7e568 --- /dev/null +++ b/usecaseui-portal/src/app/animates.ts @@ -0,0 +1,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')) +]); \ No newline at end of file -- cgit 1.2.3-korg