Build AngularJs component for usecase-ui

Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3
Issue-ID: USECASEUI-154
Signed-off-by: zhangab <zhanganbing@chinamobile.com>

1 files changed, 42 insertions, 0 deletions

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