animation seems to work not list values

Carpenteri1 · Apr 13, 2024 · 660bacb · 660bacb
1 parent 391c9d5
commit 660bacb
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 42 deletions.
diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
@@ -9,7 +9,7 @@
                 <h2>{{title}}</h2>
             </div>
             <div class="row" style="border:2px solid green;">
-                <div *ngFor="let item of currentListOfSKills" [@fadeIn]="fadeIn" (@fadeOut.done)="fadeOutDone($event)">
+                <div *ngFor="let item of currentListOfSKills" [@fade]="fadeState" (@fade.done)="fadeOutDone($event)">
                     <div class="skill-main">
                         <div class="skill-wrrap">
                             <div class="skill-bar" style="position: relative;">

diff --git a/src/app/component/carouselcomponent/carousel.component.ts b/src/app/component/carouselcomponent/carousel.component.ts
@@ -1,35 +1,27 @@
 import { Component, OnInit } from "@angular/core";
-import { transition, style, animate, trigger, AnimationEvent, state } from '@angular/animations';
+import { transition, style, animate, trigger, AnimationEvent ,state} from '@angular/animations';
 import { ISkill } from "src/app/Interfaces/ISkill";
 import { StringHandler } from "src/app/Utility/stringhandler";
 @Component({
     selector: 'carousel-component',
     templateUrl: 'carousel.component.html',
     styleUrls: ['carousel.component.css'],
     animations: [
-        trigger('fadeOut', [
-            state('fadeIn', style({ opacity: 1 })),
-            state('fadeOut', style({ opacity: 0 })),
-            transition('fadeIn <=> fadeOut', [
-            animate('2000ms')
-          ])
-        ]),
-        trigger('fadeIn', [
-          state('fadeOut', style({ opacity: 0 })),
-          state('fadeIn', style({ opacity: 1 })),
-          transition('fadeOut <=> fadeIn', [
-            animate('2000ms', style({ opacity: 1 }))
+        trigger('fade', [
+          state('in', style({opacity: 1})),
+          state('out', style({opacity: 0})),
+          transition('in <=> out', [
+            animate('3s')
           ])
         ])
-      ]
+    ]
 })
 
 export class CarouselComponent implements OnInit {
 
     readonly title: string = StringHandler.carouselTitle;
     private interval: number = 8000;
-    fadeIn = true;
-    fadeOut = false;
+    fadeState: string = 'in';
 
     private intervalId: any;
 
@@ -75,8 +67,9 @@ export class CarouselComponent implements OnInit {
 
     carouselTime(interval:number) 
     {
+        /*
         this.intervalId = setInterval(() => 
-            this.carouselRotation(), interval);
+            this.carouselRotation(), interval);*/
     }
 
     carouselRotation()
@@ -85,11 +78,6 @@ export class CarouselComponent implements OnInit {
         this.setMessage();
     }
 
-    fadeOutDone2() {
-        this.index++;
-        this.setMessage();
-    }
-
     setMessage() 
     {
         if (this.index <= 2 && 
@@ -117,33 +105,31 @@ export class CarouselComponent implements OnInit {
         if(direction === 'right'){
             this.index++;  
         }
-        this.setMessage();
+        this.startFadeOut();
+    }
+
+    startFadeOut() {
+        this.fadeState = 'out';
+    }
+
+    fadeOutDone(event: AnimationEvent) {
+      if (event.toState === 'out') {
+        this.index++;
+        this.fadeState = 'in';
+        setTimeout(() => {
+            this.setMessage();
+        }, 3000); //
+      }
     }
 
     private resetCarouselTime(): void
-    {
+    {/*
         if (this.intervalId) 
         {
             clearInterval(this.intervalId);
         }
         if(this.fadeIn)
-            this.carouselTime(this.interval);
-    }
-
-    fadeOutDone(event: AnimationEvent) {//TODO dont seem to change state.
-
-        if (event.fromState === 'void'){
-            console.log(event);
-            event.fromState = 'fadeIn';
-            event.toState = 'fadeOut';
-            this.fadeOut = true;
-        }
-        if (event.fromState === 'fadeOut'){
-            console.log(event);
-            event.fromState = 'fadeOut';
-            event.toState = 'fadeIn';
-            this.fadeOut = true;
-        }
+            this.carouselTime(this.interval)*/
     }
 
     ngOnInit()