Merge pull request #15 from criar-art/rotate-animation

Implement Rotate Left and Right Animations
criar-art · Oct 17, 2024 · 8e59564 · 8e59564
2 parents 2396b33 + 728c221
commit 8e59564
Show file tree

Hide file tree

Showing 3 changed files with 101 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
@@ -50,6 +50,21 @@
   &.scale-out {
     animation: up-window-scaleOut 0.5s forwards;
   }
+  &.rotate-left {
+    animation: up-window-rotateLeft 0.5s forwards;
+  }
+
+  &.rotate-left-out {
+    animation: up-window-rotateLeftOut 0.5s forwards;
+  }
+
+  &.rotate-right {
+    animation: up-window-rotateRight 0.5s forwards;
+  }
+
+  &.rotate-right-out {
+    animation: up-window-rotateRightOut 0.5s forwards;
+  }
 }
 
 @keyframes up-window-fadeIn {
@@ -184,6 +199,50 @@
   }
 }
 
+@keyframes up-window-rotateLeft {
+  from {
+    opacity: 0;
+    transform: rotate(0deg) scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(-360deg) scale(1);
+  }
+}
+
+@keyframes up-window-rotateLeftOut {
+  from {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotate(-360deg) scale(0.5);
+  }
+}
+
+@keyframes up-window-rotateRight {
+  from {
+    opacity: 0;
+    transform: rotate(0deg) scale(0.5);
+  }
+  to {
+    opacity: 1;
+    transform: rotate(360deg) scale(1);
+  }
+}
+
+@keyframes up-window-rotateRightOut {
+  from {
+    opacity: 1;
+    transform: rotate(0deg) scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: rotate(360deg) scale(0.5);
+  }
+}
+
 @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
@@ -97,5 +97,37 @@ <h2 class="content-title">Animation</h2>
     >
       Scale content!
     </up-window-angular>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('rotate-left')"
+    >
+      <span class="material-symbols-outlined"> &#xe419; </span> Rotate Left
+    </button>
+    <up-window-angular
+      [isOpen]="isWindowOpenRotateLeft"
+      title="Rotate Left Window"
+      subtitle="This window uses a rotate-left animation."
+      animation="rotate-left"
+    >
+      Rotate Left content!
+    </up-window-angular>
+
+    <button
+      class="button-modal-example"
+      type="button"
+      (click)="openWindowExample('rotate-right')"
+    >
+      <span class="material-symbols-outlined"> &#xe41a; </span> Rotate Right
+    </button>
+    <up-window-angular
+      [isOpen]="isWindowOpenRotateRight"
+      title="Rotate Right Window"
+      subtitle="This window uses a rotate-right animation."
+      animation="rotate-right"
+    >
+      Rotate Right content!
+    </up-window-angular>
   </div>
 </div>
diff --git a/src/app/examples/animation/animation.component.ts b/src/app/examples/animation/animation.component.ts
@@ -15,6 +15,8 @@ export class AnimationComponent {
   isWindowOpenSlideUp: WritableSignal<boolean> = signal(false);
   isWindowOpenSlideDown: WritableSignal<boolean> = signal(false);
   isWindowOpenScale: WritableSignal<boolean> = signal(false);
+  isWindowOpenRotateLeft: WritableSignal<boolean> = signal(false);
+  isWindowOpenRotateRight: WritableSignal<boolean> = signal(false);
 
   openWindowExample(type: string) {
     this.isWindowOpenFade.set(false);
@@ -23,6 +25,8 @@ export class AnimationComponent {
     this.isWindowOpenSlideUp.set(false);
     this.isWindowOpenSlideDown.set(false);
     this.isWindowOpenScale.set(false);
+    this.isWindowOpenRotateLeft.set(false);
+    this.isWindowOpenRotateRight.set(false);
 
     switch (type) {
       case 'fade':
@@ -43,6 +47,12 @@ export class AnimationComponent {
       case 'scale':
         this.isWindowOpenScale.set(true);
         break;
+      case 'rotate-left':
+        this.isWindowOpenRotateLeft.set(true);
+        break;
+      case 'rotate-right':
+        this.isWindowOpenRotateRight.set(true);
+        break;
     }
   }