data-grid-workspace 0.0.120

package/backup-29-10-2025/projects/data-grid/src/lib/data-grid/animations.ts

@@ -0,0 +1,228 @@
+import { trigger, transition, style, animate, stagger, query, state, keyframes } from '@angular/animations';
+
+export const TableRowAnimations: any = {
+  accordionToggle: trigger('accordionToggle', [
+    state('collapsed', style({ height: '0px', overflow: 'unset' })),
+    state('expanded', style({ height: '*', overflow: 'unset' })),
+    transition('collapsed <=> expanded', animate('300ms ease-in')),
+  ]),
+
+  slideToggle: trigger('slideToggle', [
+    transition(':enter', [
+      style({ height: '0px', opacity: 0, overflow: 'hidden' }),
+      animate('300ms ease-out', style({ height: '*', opacity: 1 })),
+    ]),
+    transition(':leave', [
+      style({ height: '*', opacity: 1, overflow: 'hidden' }),
+      animate('300ms ease-in', style({ height: '0px', opacity: 0 })),
+    ]),
+  ]),
+
+  slideUp: 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')),
+  ]),
+
+  rowAnimation: trigger('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 }
+      ),
+    ]),
+  ]),
+  fadeSlideUp: trigger('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 })
+    ])
+  ]),
+
+  /** 2️⃣ Zoom In + Fade */
+  zoomIn: trigger('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 })
+    ])
+  ]),
+
+  /** 3️⃣ Spread Out Horizontally (like “rows opening”) */
+  spreadHorizontal: trigger('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 })
+    ])
+  ]),
+
+  /** 4️⃣ Merge In (spread out -> join center) */
+  mergeIn: trigger('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 })
+    ])
+  ]),
+
+  /** 5️⃣ Bounce In */
+  bounceIn: trigger('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 })
+    ])
+  ]),
+
+  /** 6️⃣ Rotate In */
+  rotateIn: trigger('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 })
+    ])
+  ]),
+
+  /** 7️⃣ Slide In from Left */
+  slideInLeft: trigger('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 })
+    ])
+  ]),
+
+  /** 8️⃣ Float In (wavy ease) */
+  floatIn: trigger('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.0 }),
+          ]))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('200ms ease', style({ opacity: 0, transform: 'translateY(5px)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 9️⃣ Collapse & Spread (rows contract, then expand again) */
+  collapseSpread: trigger('collapseSpread', [
+    transition('* => *', [
+      query(':enter', [
+        style({ opacity: 0, transform: 'scaleY(0.5)' }),
+        stagger(50, [
+          animate('400ms ease-out', style({ opacity: 1, transform: 'scaleY(1)' }))
+        ])
+      ], { optional: true }),
+      query(':leave', [
+        stagger(40, [
+          animate('250ms ease-in', style({ opacity: 0, transform: 'scaleY(0.5)' }))
+        ])
+      ], { optional: true })
+    ])
+  ]),
+
+  /** 🔟 Curtain Drop (rows fall in like curtains) */
+  curtainDrop: trigger('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 })
+    ])
+  ]),
+};