feat: polish day finish ani

johannesjo · Jan 24, 2025 · 246e43c · 246e43c
1 parent 89b27b7
commit 246e43c
Showing 1 changed file with 60 additions and 25 deletions.
diff --git a/src/app/ui/animations/warp-route.ts b/src/app/ui/animations/warp-route.ts
@@ -7,33 +7,68 @@ import {
   transition,
   trigger,
 } from '@angular/animations';
-import { ANI_ENTER_TIMING } from './animation.const';
+import {
+  ANI_ENTER_TIMING,
+  ANI_LONG_TIMING,
+  ANI_VERY_LONG_TIMING,
+} from './animation.const';
 
 export const warpRouteAnimation = trigger('warpRoute', [
-  // transition('* <=> *', [
-  //   group([
-  //     query(
-  //       ':enter',
-  //       [
-  //         style({
-  //           opacity: 0,
-  //           transform: 'translateY(9rem) rotate(-10deg)'
-  //         }),
-  //         animate(
-  //           '0.35s cubic-bezier(0, 1.8, 1, 1.8)',
-  //           style({opacity: 1, transform: 'translateY(0) rotate(0)'})
-  //         ),
-  //         animateChild()
-  //       ],
-  //       {optional: true}
-  //     ),
-  //     query(
-  //       ':leave',
-  //       [animate('0.35s', style({opacity: 0})), animateChild()],
-  //       {optional: true}
-  //     )
-  //   ])
-  // ])
+  transition('* => daily-summary', [
+    /* 1 */ query(
+      ':enter, :leave',
+      style({ position: 'absolute', width: '100%', minHeight: '100%', height: '100%' }),
+      { optional: true },
+    ),
+    group([
+      query(
+        ':leave',
+        [
+          style({ opacity: 1, transform: 'scale(1)' }),
+          animate(ANI_ENTER_TIMING, style({ opacity: 0, transform: 'scale(1.1)' })),
+          animateChild(),
+        ],
+        { optional: true },
+      ),
+      query(
+        ':enter',
+        [
+          style({ opacity: 0, transform: 'scale(1.2)' }),
+          query(
+            '.daily-summary-summary, .simple-counter-summary, .day-end-note, mat-tab-group, .back-btn, h1',
+            [style({ opacity: 0 })],
+          ),
+
+          group([
+            animate(ANI_ENTER_TIMING, style({ opacity: 1, transform: 'scale(1)' })),
+            query('h1', [
+              style({ opacity: 0 }),
+              animate(ANI_LONG_TIMING, style({ opacity: 1 })),
+            ]),
+          ]),
+          query(
+            '.daily-summary-summary, .simple-counter-summary, .day-end-note, mat-tab-group, .back-btn',
+            [style({ opacity: 0 }), animate(ANI_VERY_LONG_TIMING, style({ opacity: 1 }))],
+          ),
+          // query('.daily-summary-summary', [
+          //   style({ opacity: 0 }),
+          //   animate(ANI_ENTER_TIMING, style({ opacity: 1 })),
+          // ]),
+          // query('.simple-counter-summary, .day-end-note', [
+          //   style({ opacity: 0 }),
+          //   animate(ANI_ENTER_TIMING, style({ opacity: 1 })),
+          // ]),
+          // query(' mat-tab-group, .back-btn', [
+          //   style({ opacity: 0 }),
+          //   animate(ANI_ENTER_TIMING, style({ opacity: 1 })),
+          // ]),
+
+          animateChild(),
+        ],
+        { optional: true },
+      ),
+    ]),
+  ]),
 
   transition('* <=> *', [
     /* 1 */ query(