Animating transitions between questions

IHTSDO · Jan 7, 2025 · e403232 · e403232
1 parent 4e7b3eb
commit e403232
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 30 deletions.
diff --git a/docs/index.html b/docs/index.html
diff --git a/docs/main.ff1d9a65480d9922.js → docs/main.7039fd160b124446.js b/docs/main.ff1d9a65480d9922.js → docs/main.7039fd160b124446.js
diff --git a/docs/styles.6f8567121c5f43f5.css → docs/styles.891591f966c73916.css b/docs/styles.6f8567121c5f43f5.css → docs/styles.891591f966c73916.css
diff --git a/src/app/maturity/maturity-main/maturity-main.component.html b/src/app/maturity/maturity-main/maturity-main.component.html
@@ -3,9 +3,9 @@
     <button mat-flat-button color="accent" (click)="fileInput.click()">Load Maturity Spec</button>
 </div>
 <div class="question-flow-container" *ngIf="currentQuestionIndex === -1">
-    <div class="question-container" [formGroup]="responseForm" [@fadeInOut]>
+    <div class="question-container" [formGroup]="responseForm">
     <h2>Select Stakeholder</h2>
-    <mat-radio-group [formControl]="currentControl" class="options-container">
+    <mat-radio-group [formControl]="currentControl" class="options-container" [@questionAnimation]="animationState">
       <mat-radio-button *ngFor="let stakeholder of maturityQuestions.stakeHolders" [value]="stakeholder.id">
         {{ stakeholder.name }}
       </mat-radio-button>
@@ -22,13 +22,13 @@ <h2>Select Stakeholder</h2>
 </div>
 
 <div class="question-flow-container" *ngIf="currentQuestionIndex >= 0 && currentQuestionIndex < allQuestions.length">
-    <div class="question-container" [formGroup]="responseForm" *ngIf="currentQuestionIndex < allQuestions.length" [@fadeInOut]>
+    <div class="question-container" [formGroup]="responseForm" *ngIf="currentQuestionIndex < allQuestions.length">
         <h2>Stakeholder: {{ allQuestions[currentQuestionIndex].stakeholderName }}</h2>
         <mat-progress-bar mode="determinate" [value]="((currentQuestionIndex + 1) / (allQuestions.length + 1)) * 100" class="progress-bar"></mat-progress-bar>
         <div class="progress-message">Question {{ currentQuestionIndex + 1 }} of  {{ allQuestions.length }}</div>
         <h3>Key Process Area: {{ allQuestions[currentQuestionIndex].kpaName }}</h3>
-        <p class="question-text">{{ allQuestions[currentQuestionIndex].question.question }}</p>
-        <mat-radio-group [formControl]="currentControl" class="options-container">
+        <p class="question-text" [@questionAnimation]="animationState">{{ allQuestions[currentQuestionIndex].question.question }}</p>
+        <mat-radio-group [formControl]="currentControl" class="options-container" [@questionAnimation]="animationState">
             <mat-radio-button *ngFor="let option of allQuestions[currentQuestionIndex].question.options" [value]="option.score">
                 <div class="mat-radio-label-content">
                     {{ option.text }}
@@ -62,7 +62,7 @@ <h3>Key Process Area: {{ allQuestions[currentQuestionIndex].kpaName }}</h3>
 </div>
 
 <div class="question-flow-container" *ngIf="currentQuestionIndex == allQuestions.length">
-    <div class="question-container">
+    <div class="question-container" [@questionAnimation]="animationState">
         <h2>Stakeholder: {{ allQuestions[currentQuestionIndex - 1].stakeholderName }}</h2>
         <h3>Maturity assessment results</h3>
 

diff --git a/src/app/maturity/maturity-main/maturity-main.component.ts b/src/app/maturity/maturity-main/maturity-main.component.ts
@@ -11,10 +11,15 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
   templateUrl: './maturity-main.component.html',
   styleUrl: './maturity-main.component.css',
   animations: [
-    trigger('fadeInOut', [
-      state('void', style({ opacity: 0 })),
-      transition('void <=> *', [
-        animate(300)
+    trigger('questionAnimation', [
+      state('enter', style({ opacity: 1 })),
+      state('leave', style({ opacity: 0 })),
+      transition('enter => leave', [
+        animate('200ms ease-in-out', style({ opacity: 0 }))
+      ]),
+      transition('leave => enter', [
+        style({ opacity: 0 }),
+        animate('200ms ease-in-out', style({ opacity: 1 }))
       ])
     ])
   ]
@@ -27,6 +32,7 @@ export class MaturityMainComponent implements OnInit {
   currentQuestionIndex = -1;
   currentControl!: FormControl;
   selectedStakeholder: any = null;
+  animationState = 'enter';
 
   constructor(private http: HttpClient, private fb: FormBuilder, private dialog: MatDialog) {
     this.responseForm = this.fb.group({
@@ -59,13 +65,17 @@ export class MaturityMainComponent implements OnInit {
   }
 
   onStakeholderSelected(): void {
-    const stakeholderId = this.responseForm.get('selectedStakeholder')?.value;
-    this.selectedStakeholder = this.maturityQuestions.stakeHolders.find(
-      (stakeholder: any) => stakeholder.id === stakeholderId
-    );
-    this.flattenQuestions(); // Refilter questions for the selected stakeholder
-    this.currentQuestionIndex = 0; // Start showing the first question
-    this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
+    this.animationState = 'leave';
+    setTimeout(() => {
+      const stakeholderId = this.responseForm.get('selectedStakeholder')?.value;
+      this.selectedStakeholder = this.maturityQuestions.stakeHolders.find(
+        (stakeholder: any) => stakeholder.id === stakeholderId
+      );
+      this.flattenQuestions(); // Refilter questions for the selected stakeholder
+      this.currentQuestionIndex = 0; // Start showing the first question
+      this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
+      this.animationState = 'enter';
+    }, 200); // Match the duration of the animation
   }
 
   flattenQuestions(): void {
@@ -86,17 +96,21 @@ export class MaturityMainComponent implements OnInit {
   }
 
   goToNextQuestion() {
-    if (this.currentQuestionIndex < this.allQuestions.length - 1) {
+    this.animationState = 'leave';
+    setTimeout(() => {
       this.currentQuestionIndex++;
       this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
-    }
+      this.animationState = 'enter';
+    }, 200);
   }
 
   goToPreviousQuestion() {
-    if (this.currentQuestionIndex > 0) {
+    this.animationState = 'leave';
+    setTimeout(() => {
       this.currentQuestionIndex--;
       this.currentControl = this.responseForm.controls[this.allQuestions[this.currentQuestionIndex].questionFullPath] as FormControl;
-    }
+      this.animationState = 'enter';
+    }, 200);
   }
 
   startOver(): void {
@@ -123,11 +137,15 @@ export class MaturityMainComponent implements OnInit {
   }
 
   submitStakeholderResponses(): void {
-    this.currentQuestionIndex++;
-    // this.dialog.open(MaturityResultsDialogComponent, {
-    //   width: '1600px',
-    //   data: { maturityResponse: this.responseForm.value }
-    // });
+    this.animationState = 'leave';
+    setTimeout(() => {
+      this.currentQuestionIndex++;
+      this.animationState = 'enter';
+      // this.dialog.open(MaturityResultsDialogComponent, {
+      //   width: '1600px',
+      //   data: { maturityResponse: this.responseForm.value }
+      // });
+    }, 200);
   }
 
   getStakeholderFormGroup(stakeholderName: string): FormGroup {