Merge pull request #2032 from IDEMSInternational/feature/animated-sec…

…tion-styles-new Feature/animated section styles
IDEMSInternational · Aug 24, 2023 · a44e19f · a44e19f
2 parents 1bc714f + 11544d1
commit a44e19f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/app/shared/animations.ts b/src/app/shared/animations.ts
@@ -9,6 +9,13 @@ const fadeInOut = [
     transition("in => out", [animate("0.5s")]),
     // todo - could use :enter and :exit properties also (need to confirm doesn't break existing functionality)
   ]),
+  trigger("noFade", [
+    state("in", style({ opacity: 1 })), // these are needed for the images to actually appear (coming in)
+    // we don't require a state for out as we want the images to disappear immediately
+    transition("* => in", [
+      animate("0s 0.5s", style({ opacity: 0 })), // delay animation for 0.5s in order for previous animation to finish
+    ]),
+  ]),
 ];
 
 const fadeEntryExit = [

diff --git a/src/app/shared/components/template/components/animated-slides/animated-slides.component.html b/src/app/shared/components/template/components/animated-slides/animated-slides.component.html
@@ -4,7 +4,11 @@
     {{ skipText }}
   </ion-button>
   <div class="section-container">
-    <section *ngFor="let childRow of _row.rows; let idx = index" [@fadeInOut]="fadeSection[idx]">
+    <section
+      *ngFor="let childRow of _row.rows; let idx = index"
+      [@fadeInOut]="slideParams[idx].animation === 'fade' ? fadeSection[idx] : null"
+      [@noFade]="slideParams[idx].animation === 'none' ? fadeSection[idx] : null"
+    >
       <plh-template-component [row]="childRow" [parent]="parent"></plh-template-component>
     </section>
   </div>

diff --git a/src/app/shared/components/template/components/animated-slides/animated-slides.component.ts b/src/app/shared/components/template/components/animated-slides/animated-slides.component.ts
@@ -4,7 +4,7 @@ import { getNumberParamFromTemplateRow, getStringParamFromTemplateRow } from "sr
 import { TemplateBaseComponent } from "../base";
 
 @Component({
-  animations: PLHAnimations.fadeInOut,
+  animations: [PLHAnimations.fadeInOut],
   selector: "template-animated-slides",
   templateUrl: "./animated-slides.component.html",
   styleUrls: ["./animated-slides.component.scss"],
@@ -17,6 +17,7 @@ export class TmplAnimatedSlidesComponent extends TemplateBaseComponent implement
   fadeTimes = [];
   private _isDismissed = false;
   style: string | null;
+  slideParams: { duration: number; animation: string }[] = [];
 
   ngOnInit(): void {
     this.getParams();
@@ -25,8 +26,15 @@ export class TmplAnimatedSlidesComponent extends TemplateBaseComponent implement
 
   getParams() {
     this.skipText = getStringParamFromTemplateRow(this._row, "skip_text", "Skip");
+
     for (let row of this._row.rows) {
-      this.fadeTimes.push(getNumberParamFromTemplateRow(row, "duration", 0) * 1000);
+      const duration = getNumberParamFromTemplateRow(row, "duration", 0) * 1000;
+      const animation = getStringParamFromTemplateRow(row, "animation", "fade"); // default to fade
+
+      this.slideParams.push({
+        duration,
+        animation,
+      });
     }
     this.style = getStringParamFromTemplateRow(this._row, "style", null);
   }
@@ -37,10 +45,10 @@ export class TmplAnimatedSlidesComponent extends TemplateBaseComponent implement
    */
   private async runFade() {
     let i = 0;
-    for (let fadeTime of this.fadeTimes) {
+    for (let slideParam of this.slideParams) {
       this.fadeSection[i] = "in";
       // wait specified time plus additional animation time
-      await this._wait(fadeTime + 1500);
+      await this._wait(slideParam.duration + 1500);
       this.fadeSection[i] = "out";
       i++;
     }