Implement Rotate Left and Right Animations

[lucasferreiralimax]

This pull request introduces two new animations—rotate-left and rotate-right—for the UpWindowAngularComponent. These animations enhance the user experience by providing additional visual effects when the modal window is opened or closed.

Changes Made

• Added CSS Animations:

  • Implemented the following animations in the SCSS file:
    • rotate-left: Rotates the window to the left.
    • rotate-right: Rotates the window to the right.

• Updated AnimationComponent:

  • Added buttons to trigger the new rotate animations.
  • Implemented logic to open the window with the appropriate animation.

<button
  class="button-modal-example"
  type="button"
  (click)="openWindowExample('rotate-left')"
>
  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')"
>
  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>

Screen Video

rotate.mp4

[github-actions]

Visit the preview URL for this PR (updated for commit 728c221):

https://up-window-angular--pr15-rotate-animation-gjlq0fmq.web.app

_{(expires Thu, 24 Oct 2024 07:01:01 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 7822e0d6e40bbbcb5ceaa0eda2c38488d7b613f8}