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 index 0d590b3..b318d94 100644 --- 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 index 5cf9cef..669d1ab 100644 --- a/src/app/examples/animation/animation.component.html +++ b/src/app/examples/animation/animation.component.html @@ -129,5 +129,52 @@

Animation

> Rotate Right content! + + + Flipper Left content! + + + + + Flipper Right content! + + + + + Flipper Up content! + diff --git a/src/app/examples/animation/animation.component.ts b/src/app/examples/animation/animation.component.ts index 376e7af..c8d55b9 100644 --- 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 = signal(false); isWindowOpenRotateLeft: WritableSignal = signal(false); isWindowOpenRotateRight: WritableSignal = signal(false); + isWindowOpenFlipperLeft: WritableSignal = signal(false); + isWindowOpenFlipperRight: WritableSignal = signal(false); + isWindowOpenFlipperUp: WritableSignal = 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; } }