state and trigger changes

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

Hide file tree

Showing 3 changed files with 41 additions and 79 deletions.
diff --git a/src/app/component/carouselcomponent/carousel.component.css b/src/app/component/carouselcomponent/carousel.component.css
@@ -76,59 +76,3 @@
         border-radius: 2px;
       }
     }
-/*  
-@media only screen and (max-width: 835px),
-screen and (max-height: 520px) {
-    .setspace{
-      padding:0;
-    }
-}
-
-@media only screen and (max-width: 767px),
-screen and (max-height: 655px) {
-    .progress{
-      height: 1.2em;
-      width: 85%;
-    }
-}
-
-@media only screen and (max-width: 575px){
-    p{
-        font-size:0.7em;
-    }
-    .progress{
-      width: 100%;
-      margin-top: -1.5em;
-    }
-    .col-sm-4 p{
-      text-align: center;
-    }
-
-}
-
-@media only screen and (min-height: 420px ){
-  .setspace{
-    padding:0;
-  }
-  .progress{
-    height: 2em !important;
-  }
-}
-
-
-@media only screen and (max-width: 420px),
-screen and (max-height: 535px) {
-  .progress{
-    height: 1em;
-  }
-}
-
-@media only screen and (max-width: 250px),
-screen and (max-height: 450px) {
-    p{
-        font-size:0.6em;
-    }
-    .progress{
-      height: 0.8em;
-    }
-}*/
diff --git a/src/app/component/carouselcomponent/carousel.component.html b/src/app/component/carouselcomponent/carousel.component.html
@@ -1,25 +1,27 @@
 
-<div class="container pt-5">
-    <div class="row text-center">
-        <h2>{{title}}</h2>
-    </div>
+<div class="container pt-5" style="border:2px solid blue;">
     <div class="row pt-4 d-flex align-items-center">
         <div class="col-2">
             <button class="no-outline" (click)="toggleGroup('left')"><i class="bi bi-arrow-left"></i></button>
         </div>
-        <div class="col-9">
-            <div *ngFor="let item of currentListOfSKills" @fade [@fadeOut]="fadeIn ? null : true" (@fadeOut.done)="fadeOutDone($event)" [@fadeIn]="fadeIn">
-                <div class="skill-main">
-                    <div class="skill-wrrap">
-                        <div class="skill-bar" style="position: relative;">
-                            <div class="skill-name" style="position: absolute; z-index: 1;">{{item.name}}</div>
-                            <div class="skill-per" style="background-color: #b29600; width:{{item.level}}%;" [attr.per]="item.level"></div>
+        <div class="col-8">
+            <div class="row text-center" style="border:2px solid red;">
+                <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 class="skill-main">
+                        <div class="skill-wrrap">
+                            <div class="skill-bar" style="position: relative;">
+                                <div class="skill-name" style="position: absolute; z-index: 1;">{{item.name}}</div>
+                                <div class="skill-per" style="background-color: #b29600; width:{{item.level}}%;" [attr.per]="item.level"></div>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-        <div class="col-1">
+        <div class="col-2" style="padding-left: 4em;">
             <button class="no-outline" (click)="toggleGroup('right')"><i class="bi bi-arrow-right"></i></button>
         </div>
     </div>

diff --git a/src/app/component/carouselcomponent/carousel.component.ts b/src/app/component/carouselcomponent/carousel.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from "@angular/core";
-import { transition, style, animate, trigger, AnimationEvent } 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({
@@ -8,13 +8,16 @@ import { StringHandler } from "src/app/Utility/stringhandler";
     styleUrls: ['carousel.component.css'],
     animations: [
         trigger('fadeOut', [
-          transition(':leave', [
-            animate('2000ms', style({ opacity: 0 }))
+            state('fadeIn', style({ opacity: 1 })),
+            state('fadeOut', style({ opacity: 0 })),
+            transition('fadeIn <=> fadeOut', [
+            animate('2000ms')
           ])
         ]),
         trigger('fadeIn', [
-          transition(':enter', [
-            style({ opacity: 0 }),
+          state('fadeOut', style({ opacity: 0 })),
+          state('fadeIn', style({ opacity: 1 })),
+          transition('fadeOut <=> fadeIn', [
             animate('2000ms', style({ opacity: 1 }))
           ])
         ])
@@ -25,7 +28,8 @@ export class CarouselComponent implements OnInit {
 
     readonly title: string = StringHandler.carouselTitle;
     private interval: number = 8000;
-    fadeIn = false;
+    fadeIn = true;
+    fadeOut = false;
 
     private intervalId: any;
 
@@ -81,6 +85,11 @@ export class CarouselComponent implements OnInit {
         this.setMessage();
     }
 
+    fadeOutDone2() {
+        this.index++;
+        this.setMessage();
+    }
+
     setMessage() 
     {
         if (this.index <= 2 && 
@@ -121,12 +130,19 @@ export class CarouselComponent implements OnInit {
             this.carouselTime(this.interval);
     }
 
-    fadeOutDone(event: AnimationEvent) {
-        if(event.toState === 'void'){
-            this.fadeIn = true;
+    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;
         }
-        else{
-            this.fadeIn = false;
+        if (event.fromState === 'fadeOut'){
+            console.log(event);
+            event.fromState = 'fadeOut';
+            event.toState = 'fadeIn';
+            this.fadeOut = true;
         }
     }