summaryrefslogtreecommitdiffstats
path: root/usecaseui-portal/src/app/animates.ts
diff options
context:
space:
mode:
authorzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:03 +0800
committerzhangab <zhanganbing@chinamobile.com>2018-10-23 11:32:05 +0800
commitde9d2e95b43991fccee342ebed03b006f6fed844 (patch)
tree0667c51a30fd3fed71fec797136d8adefc7d7baf /usecaseui-portal/src/app/animates.ts
parent101e5e37f4ece60af8d08020c7e4bd8f473adce7 (diff)
Build AngularJs component for usecase-ui
Change-Id: I393f4837fc5f9cbd71448dbf20e1f1781f0656d3 Issue-ID: USECASEUI-154 Signed-off-by: zhangab <zhanganbing@chinamobile.com>
Diffstat (limited to 'usecaseui-portal/src/app/animates.ts')
-rw-r--r--usecaseui-portal/src/app/animates.ts42
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