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 @@