style(Experiences): 💫 positionEnterAnimation for each position group …

…instead of all the positions component
JuamBer · Nov 23, 2023 · 1104efa · 1104efa
1 parent c051fc5
commit 1104efa
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 31 deletions.
diff --git a/src/app/website/components/experience/experience.component.html b/src/app/website/components/experience/experience.component.html
@@ -1,7 +1,12 @@
-<div class="experience" *appLet="language$ | async as language" #positions>
+<div class="experience" *appLet="language$ | async as language">
   <ul *ngIf="!(loadingPositions$ | async)">
-    <li *ngFor="let positionGrouped of positionsGrouped$ | async">
-      <div class="header" [@positionsHeaderEnterAnimation]="positionsElementState">
+    <li
+      *ngFor="let positionGrouped of positionsGrouped$ | async"
+      #position
+      [id]="positionGrouped.company.id"
+      [@positionEnterAnimation]="getPositionEnterAnimationState(positionGrouped.company.id)"
+    >
+      <div class="header">
         <div class="icon">
           <i *ngIf="positionGrouped.company.name !== 'Odec'" class="fa-solid fa-graduation-cap"></i>
           <i *ngIf="positionGrouped.company.name === 'Odec'" class="fa-solid fa-briefcase"></i>
@@ -10,7 +15,7 @@
           <h3>{{ positionGrouped.company.name }}</h3>
         </div>
       </div>
-      <div class="items" [@positionsItemsEnterAnimation]="positionsElementState">
+      <div class="items">
         <ul>
           <li class="item" *ngFor="let position of positionGrouped.positions">
             <div class="position">

diff --git a/src/app/website/components/experience/experience.component.ts b/src/app/website/components/experience/experience.component.ts
@@ -1,13 +1,14 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import {
-  AfterViewInit,
+  AfterViewChecked,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   OnDestroy,
   OnInit,
-  ViewChild,
+  QueryList,
+  ViewChildren,
   inject,
 } from '@angular/core';
 import { Store } from '@ngrx/store';
@@ -31,24 +32,19 @@ export class PositionGroupedByCompany {
   styleUrls: ['./experience.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
-    trigger('positionsHeaderEnterAnimation', [
+    trigger('positionEnterAnimation', [
       state('inViewport', style({ transform: 'translateX(0)' })),
       state('notInViewport', style({ transform: 'translateX(+20%)' })),
       transition('notInViewport <=> inViewport', animate('0.15s')),
     ]),
-    trigger('positionsItemsEnterAnimation', [
-      state('inViewport', style({ transform: 'translateX(0)' })),
-      state('notInViewport', style({ transform: 'translateX(+20%)' })),
-      transition('notInViewport <=> inViewport', animate('0.25s')),
-    ]),
   ],
 })
-export class ExperienceComponent implements OnInit, AfterViewInit, OnDestroy {
+export class ExperienceComponent implements OnInit, AfterViewChecked, OnDestroy {
   private store = inject(Store);
   private ref = inject(ChangeDetectorRef);
 
-  @ViewChild('positions') positionsElement: ElementRef;
-  positionsElementState: 'inViewport' | 'notInViewport' = 'notInViewport';
+  @ViewChildren('position') positionElements: QueryList<ElementRef>;
+  positionElementStates = new Map<string, 'inViewport' | 'notInViewport'>();
 
   unsubscribe$: Subject<void> = new Subject();
   language$: Observable<Language> = this.store.select(publicLanguageReducer.getOne);
@@ -92,18 +88,19 @@ export class ExperienceComponent implements OnInit, AfterViewInit, OnDestroy {
     this.unsubscribe$.complete();
   }
 
-  ngAfterViewInit(): void {
-    setTimeout(() => {
+  ngAfterViewChecked(): void {
+    this.positionElements.forEach((positionElement) => {
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((entry) => {
-          this.positionsElementState = entry.isIntersecting ? 'inViewport' : 'notInViewport';
-          if (this.positionsElementState === 'inViewport') {
+          const positionsElementState = entry.isIntersecting ? 'inViewport' : 'notInViewport';
+          this.positionElementStates.set(positionElement.nativeElement.id, positionsElementState);
+          if (positionsElementState === 'inViewport') {
             this.ref.detectChanges();
           }
         });
       });
-      observer.observe(this.positionsElement.nativeElement);
-    }, 100);
+      observer.observe(positionElement.nativeElement);
+    });
   }
 
   ngOnInit(): void {
@@ -113,17 +110,21 @@ export class ExperienceComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     });
 
-    this.loadingPositions$.pipe(takeUntil(this.unsubscribe$)).subscribe((loading) => {
-      if (!loading && this.positionsElementState === 'inViewport') {
-        this.positionsElementState = 'notInViewport';
-        this.ref.detectChanges();
+    // this.loadingPositions$.pipe(takeUntil(this.unsubscribe$)).subscribe((loading) => {
+    //   if (!loading && this.positionsElementState === 'inViewport') {
+    //     this.positionsElementState = 'notInViewport';
+    //     this.ref.detectChanges();
 
-        setTimeout(() => {
-          this.positionsElementState = 'inViewport';
-          this.ref.detectChanges();
-        });
-      }
-    });
+    //     setTimeout(() => {
+    //       this.positionsElementState = 'inViewport';
+    //       this.ref.detectChanges();
+    //     });
+    //   }
+    // });
+  }
+
+  public getPositionEnterAnimationState(companyId: string): 'inViewport' | 'notInViewport' {
+    return this.positionElementStates.get(companyId) || 'notInViewport';
   }
 
   get getTranslation() {