Merge pull request #29 from criar-art/flipper-animation

Flipper animation
criar-art · Oct 17, 2024 · d34786c · d34786c
2 parents 82b5a27 + dab5ca5
commit d34786c
Show file tree

Hide file tree

Showing 3 changed files with 152 additions and 0 deletions.
diff --git a/projects/up-window-angular/src/lib/up-window-angular.animation.scss b/projects/up-window-angular/src/lib/up-window-angular.animation.scss
@@ -65,6 +65,30 @@
   &.rotate-right-out {
     animation: up-window-rotateRightOut 0.5s forwards;
   }
+
+  &.flipper-left {
+    animation: up-window-flipLeftIn 0.5s forwards;
+  }
+
+  &.flipper-left-out {
+    animation: up-window-flipLeftOut 0.5s forwards;
+  }
+
+  &.flipper-right {
+    animation: up-window-flipRightIn 0.5s forwards;
+  }
+
+  &.flipper-right-out {
+    animation: up-window-flipRightOut 0.5s forwards;
+  }
+
+  &.flipper-up {
+    animation: up-window-flipUpIn 0.5s forwards;
+  }
+
+  &.flipper-up-out {
+    animation: up-window-flipUpOut 0.5s forwards;
+  }
 }
 
 @keyframes up-window-fadeIn {
@@ -239,6 +263,72 @@
   }
 }
 
+@keyframes up-window-flipLeftIn {
+  from {
+    opacity: 0;
+    transform: perspective(1000px) rotateY(-90deg);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1000px) rotateY(0);
+  }
+}
+
+@keyframes up-window-flipLeftOut {
+  from {
+    opacity: 1;
+    transform: perspective(1000px) rotateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(1000px) rotateY(-90deg);
+  }
+}
+
+@keyframes up-window-flipRightIn {
+  from {
+    opacity: 0;
+    transform: perspective(1000px) rotateY(90deg);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1000px) rotateY(0);
+  }
+}
+
+@keyframes up-window-flipRightOut {
+  from {
+    opacity: 1;
+    transform: perspective(1000px) rotateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(1000px) rotateY(90deg);
+  }
+}
+
+@keyframes up-window-flipUpIn {
+  from {
+    opacity: 0;
+    transform: perspective(1000px) rotateX(-90deg);
+  }
+  to {
+    opacity: 1;
+    transform: perspective(1000px) rotateX(0);
+  }
+}
+
+@keyframes up-window-flipUpOut {
+  from {
+    opacity: 1;
+    transform: perspective(1000px) rotateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: perspective(1000px) rotateX(-90deg);
+  }
+}
+
 @keyframes up-window-shake {
   0% { transform: translate(0); }
   25% { transform: translate(-5px); }

diff --git a/src/app/examples/animation/animation.component.html b/src/app/examples/animation/animation.component.html
@@ -129,5 +129,52 @@ <h2 class="content-title">Animation</h2>
     >
       Rotate Right content!
     </up-window-angular>
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('flipper-left')"
+    >
+      <span class="material-symbols-outlined"> &#xeb59; </span> Flipper Left
+    </button>
+    <up-window-angular
+      [isOpen]="isWindowOpenFlipperLeft"
+      title="Flipper Left Window"
+      subtitle="This window flips in from the left."
+      animation="flipper-left"
+    >
+      Flipper Left content!
+    </up-window-angular>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('flipper-right')"
+    >
+      <span class="material-symbols-outlined"> &#xeb52; </span> Flipper Right
+    </button>
+    <up-window-angular
+      [isOpen]="isWindowOpenFlipperRight"
+      title="Flipper Right Window"
+      subtitle="This window flips in from the right."
+      animation="flipper-right"
+    >
+      Flipper Right content!
+    </up-window-angular>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('flipper-up')"
+    >
+      <span class="material-symbols-outlined"> &#xeb2e; </span> Flipper Up
+    </button>
+    <up-window-angular
+      [isOpen]="isWindowOpenFlipperUp"
+      title="Flipper Up Window"
+      subtitle="This window flips in from the top."
+      animation="flipper-up"
+    >
+      Flipper Up content!
+    </up-window-angular>
   </div>
 </div>
diff --git a/src/app/examples/animation/animation.component.ts b/src/app/examples/animation/animation.component.ts
@@ -17,6 +17,9 @@ export class AnimationComponent {
   isWindowOpenScale: WritableSignal<boolean> = signal(false);
   isWindowOpenRotateLeft: WritableSignal<boolean> = signal(false);
   isWindowOpenRotateRight: WritableSignal<boolean> = signal(false);
+  isWindowOpenFlipperLeft: WritableSignal<boolean> = signal(false);
+  isWindowOpenFlipperRight: WritableSignal<boolean> = signal(false);
+  isWindowOpenFlipperUp: WritableSignal<boolean> = signal(false);
 
   openWindowExample(type: string) {
     this.isWindowOpenFade.set(false);
@@ -27,6 +30,9 @@ export class AnimationComponent {
     this.isWindowOpenScale.set(false);
     this.isWindowOpenRotateLeft.set(false);
     this.isWindowOpenRotateRight.set(false);
+    this.isWindowOpenFlipperLeft.set(false);
+    this.isWindowOpenFlipperRight.set(false);
+    this.isWindowOpenFlipperUp.set(false);
 
     switch (type) {
       case 'fade':
@@ -53,6 +59,15 @@ export class AnimationComponent {
       case 'rotate-right':
         this.isWindowOpenRotateRight.set(true);
         break;
+      case 'flipper-left':
+        this.isWindowOpenFlipperLeft.set(true);
+        break;
+      case 'flipper-right':
+        this.isWindowOpenFlipperRight.set(true);
+        break;
+      case 'flipper-up':
+        this.isWindowOpenFlipperUp.set(true);
+        break;
     }
   }