data-grid-workspace 0.0.120

package/projects/data-grid/src/lib/data-grid/animations.ts

@@ -0,0 +1,267 @@
+import {
+  trigger,
+  transition,
+  style,
+  animate,
+  stagger,
+  query,
+  state,
+  keyframes
+} from '@angular/animations';
+
+/** Animation names available for rows */
+export enum RowAnimationType {
+  SlideDown = 'slideDown',
+  FadeSlideUp = 'fadeSlideUp',
+  ZoomIn = 'zoomIn',
+  SpreadHorizontal = 'spreadHorizontal',
+  MergeIn = 'mergeIn',
+  BounceIn = 'bounceIn',
+  RotateIn = 'rotateIn',
+  SlideInLeft = 'slideInLeft',
+  FloatIn = 'floatIn',
+  CollapseSpread = 'collapseSpread',
+  CurtainDrop = 'curtainDrop',
+}
+
+/**
+ * All animations must be a FLAT ARRAY,
+ * not an object and not nested arrays.
+ */
+export const DATA_GRID_ANIMATIONS = [
+  trigger('accordionToggle', [
+    state('collapsed', style({ height: '0px', overflow: 'unset' })),
+    state('expanded', style({ height: '*', overflow: 'unset' })),
+    transition('collapsed <=> expanded', animate('300ms ease-in'))
+  ]),
+
+  trigger('slideToggle', [
+    transition(':enter', [
+      style({ height: '0px', opacity: 0 }),
+      animate('300ms ease-out', style({ height: '*', opacity: 1 }))
+    ]),
+    transition(':leave', [
+      style({ height: '*', opacity: 1 }),
+      animate('300ms ease-in', style({ height: '0px', opacity: 0 }))
+    ])
+  ]),
+
+  trigger('slideUp', [
+    state('void', style({ transform: 'translateY(100%)', opacity: 0 })),
+    state('*', style({ transform: 'translateY(0)', opacity: 1 })),
+    transition('void => *', animate('300ms ease-out')),
+    transition('* => void', animate('300ms ease-in'))
+  ]),
+
+  /** 🔽 SlideDown */
+  trigger(RowAnimationType.SlideDown, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateY(20px)' }),
+        stagger(60, [
+          animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
+            opacity: 1,
+            transform: 'translateY(0)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('300ms ease', style({
+            opacity: 0,
+            transform: 'translateY(-20px)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🔼 Fade + Slide Up */
+  trigger(RowAnimationType.FadeSlideUp, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateY(15px)' }),
+        stagger(40, [
+          animate('300ms ease-out', style({ opacity: 1, transform: 'translateY(0)' }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(30, [
+          animate('200ms ease-in', style({ opacity: 0, transform: 'translateY(-10px)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🔍 Zoom In */
+  trigger(RowAnimationType.ZoomIn, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'scale(0.9)' }),
+        stagger(50, [
+          animate('350ms cubic-bezier(0.25, 0.8, 0.25, 1)', style({
+            opacity: 1,
+            transform: 'scale(1)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(30, [
+          animate('250ms ease-in', style({ opacity: 0, transform: 'scale(0.9)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** ↔ Spread From Center */
+  trigger(RowAnimationType.SpreadHorizontal, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'scaleX(0.5)' }),
+        stagger(60, [
+          animate('400ms ease-out', style({ opacity: 1, transform: 'scaleX(1)' }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('250ms ease-in', style({ opacity: 0, transform: 'scaleX(0.5)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** ⬅➡ Merge Toward Center */
+  trigger(RowAnimationType.MergeIn, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateX(-50%) scale(0.95)' }),
+        stagger(50, [
+          animate('400ms cubic-bezier(0.23, 1, 0.32, 1)', style({
+            opacity: 1,
+            transform: 'translateX(0) scale(1)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('300ms ease', style({ opacity: 0, transform: 'translateX(50%) scale(0.9)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🟢 Bounce */
+  trigger(RowAnimationType.BounceIn, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateY(-15px)' }),
+        stagger(40, [
+          animate('600ms cubic-bezier(.68,-0.55,.27,1.55)', style({
+            opacity: 1,
+            transform: 'translateY(0)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(30, [
+          animate('200ms ease-in', style({
+            opacity: 0,
+            transform: 'translateY(15px)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🔄 Rotate */
+  trigger(RowAnimationType.RotateIn, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'rotateX(-90deg)' }),
+        stagger(60, [
+          animate('500ms ease-out', style({
+            opacity: 1,
+            transform: 'rotateX(0)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('300ms ease-in', style({
+            opacity: 0,
+            transform: 'rotateX(90deg)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** ◀ Slide In Left */
+  trigger(RowAnimationType.SlideInLeft, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateX(-30px)' }),
+        stagger(50, [
+          animate('350ms ease-out', style({
+            opacity: 1,
+            transform: 'translateX(0)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('200ms ease-in', style({
+            opacity: 0,
+            transform: 'translateX(30px)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🌊 Float w/ Wave */
+  trigger(RowAnimationType.FloatIn, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateY(10px)' }),
+        stagger(70, [
+          animate('600ms cubic-bezier(.25,.46,.45,.94)', keyframes([
+            style({ opacity: 0.5, transform: 'translateY(-4px)', offset: 0.3 }),
+            style({ opacity: 1, transform: 'translateY(0)', offset: 1 }),
+          ]))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('200ms ease', style({
+            opacity: 0,
+            transform: 'translateY(5px)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** ⬇ Curtain Drop */
+  trigger(RowAnimationType.CurtainDrop, [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'translateY(-50%) rotateX(90deg)' }),
+        stagger(70, [
+          animate('600ms cubic-bezier(0.175, 0.885, 0.32, 1.275)', style({
+            opacity: 1,
+            transform: 'translateY(0) rotateX(0)'
+          }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(50, [
+          animate('300ms ease-in', style({
+            opacity: 0,
+            transform: 'translateY(50%) rotateX(-90deg)'
+          }))
+        ])
+      ], { optional: true })
+    ])
+  ])
+];