style(Experiences): 💫 positionsHeaderEnterAnimation & positionsItemsE…

…nterAnimation
JuamBer · Nov 22, 2023 · 189c9ca · 189c9ca
1 parent fa31701
commit 189c9ca
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 9 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,15 @@
     },
     "editor.formatOnSave": false
   },
-  "conventionalCommits.scopes": ["Backoffice", "Web", "CV", "GenericTable", "Auth", "Certificates", "Tools", "App"]
+  "conventionalCommits.scopes": [
+    "Backoffice",
+    "Web",
+    "CV",
+    "GenericTable",
+    "Auth",
+    "Certificates",
+    "Tools",
+    "App",
+    "Experiences"
+  ]
 }
diff --git a/src/app/website/components/experience/experience.component.html b/src/app/website/components/experience/experience.component.html
@@ -1,7 +1,7 @@
-<div class="experience" *appLet="language$ | async as language">
+<div class="experience" *appLet="language$ | async as language" #positions>
   <ul *ngIf="!(loadingPositions$ | async)">
     <li *ngFor="let positionGrouped of positionsGrouped$ | async">
-      <div class="header">
+      <div class="header" [@positionsHeaderEnterAnimation]="positionsElementState">
         <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 +10,7 @@
           <h3>{{ positionGrouped.company.name }}</h3>
         </div>
       </div>
-      <div class="items">
+      <div class="items" [@positionsItemsEnterAnimation]="positionsElementState">
         <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,7 +1,18 @@
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+  AfterViewInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild,
+  inject,
+} from '@angular/core';
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { map, takeUntil } from 'rxjs/operators';
 import { Company } from 'src/app/backoffice/tables/company/models/company.model';
 import { Language } from 'src/app/backoffice/tables/language/models/language.model';
 import { Position } from 'src/app/backoffice/tables/position/models/position.model';
@@ -19,10 +30,27 @@ export class PositionGroupedByCompany {
   templateUrl: './experience.component.html',
   styleUrls: ['./experience.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [
+    trigger('positionsHeaderEnterAnimation', [
+      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 {
+export class ExperienceComponent implements OnInit, AfterViewInit, OnDestroy {
   private store = inject(Store);
+  private ref = inject(ChangeDetectorRef);
 
+  @ViewChild('positions') positionsElement: ElementRef;
+  positionsElementState: 'inViewport' | 'notInViewport' = 'notInViewport';
+
+  unsubscribe$: Subject<void> = new Subject();
   language$: Observable<Language> = this.store.select(publicLanguageReducer.getOne);
   loadingPositions$: Observable<boolean> = this.store.select(positionReducer.getLoading);
   positionsGrouped$: Observable<PositionGroupedByCompany[]> = this.store.select(positionReducer.getAll).pipe(
@@ -59,12 +87,43 @@ export class ExperienceComponent implements OnInit {
     }),
   );
 
+  ngOnDestroy(): void {
+    this.unsubscribe$.next();
+    this.unsubscribe$.complete();
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+          this.positionsElementState = entry.isIntersecting ? 'inViewport' : 'notInViewport';
+          if (this.positionsElementState === 'inViewport') {
+            this.ref.detectChanges();
+          }
+        });
+      });
+      observer.observe(this.positionsElement.nativeElement);
+    }, 100);
+  }
+
   ngOnInit(): void {
-    this.positionsGrouped$.subscribe((positionsGrouped) => {
+    this.positionsGrouped$.pipe(takeUntil(this.unsubscribe$)).subscribe((positionsGrouped) => {
       if (!positionsGrouped.length) {
         this.store.dispatch(positionActions.loadAll({ payload: null }));
       }
     });
+
+    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();
+        });
+      }
+    });
   }
 
   get getTranslation() {