[yew-devel] [PATCH yew-widget-toolkit-assets 2/6] page: add more page animation styles

[Dominik Csapak]

* fade-from-right: same as fade, but the new page moves in from the right
* fade-from-bottom: same as above, but moves in from the bottom
* flip: flips the page like a card and reveals the new page on the
  backside

Signed-off-by: Dominik Csapak <d.csapak at proxmox.com>
---
 scss/_page.scss | 86 +++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/scss/_page.scss b/scss/_page.scss
index d76100c..4fb9295 100644
--- a/scss/_page.scss
+++ b/scss/_page.scss
@@ -4,6 +4,10 @@
     --page-animation-out: page-animation-push-out var(--page-animation-time) ease-out;
 }
 
+.pwt-page-outer {
+    perspective: 1000px;
+}
+
 .pwt-page-container {
     top: 0;
     left: 0;
@@ -57,6 +61,72 @@
     }
 }
 
+ at keyframes page-animation-fade-from-right-in {
+    from {
+        opacity: 0;
+        transform: translateX(10%);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}
+
+ at keyframes page-animation-fade-from-bottom-in {
+    from {
+        opacity: 0;
+        transform: translateY(10%);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0%);
+    }
+}
+
+ at keyframes page-animation-flip-in {
+  0% {
+    opacity: 0;
+    transform: rotateY(180deg);
+  }
+
+  50% {
+    opacity: 0;
+    transform: rotateY(90deg);
+  }
+
+  51% {
+    opacity: 1;
+    transform: rotateY(90deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+}
+
+ at keyframes page-animation-flip-out {
+  0% {
+    opacity: 1;
+    transform: rotateY(0deg);
+  }
+
+  50% {
+    opacity: 1;
+    transform: rotateY(-90deg);
+  }
+
+  51% {
+    opacity: 0;
+    transform: rotateY(-90deg);
+  }
+
+  100% {
+    opacity: 0;
+    transform: rotateY(180deg);
+  }
+}
+
 @keyframes page-animation-cover-in {
     from {
         transform: translateX(100%);
@@ -108,6 +178,22 @@
     --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
 }
 
+.pwt-page-animation-fade-from-right {
+    --page-animation-in: page-animation-fade-from-right-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
+}
+
+.pwt-page-animation-fade-from-bottom {
+    --page-animation-in: page-animation-fade-from-bottom-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-fade-out var(--page-animation-time) ease-out;
+}
+
+.pwt-page-animation-flip {
+    transform-style: preserve-3d;
+    --page-animation-in: page-animation-flip-in var(--page-animation-time) ease-out;
+    --page-animation-out: page-animation-flip-out var(--page-animation-time) ease-out;
+}
+
 .pwt-page-animation-cover {
     --page-animation-in: page-animation-cover-in var(--page-animation-time) ease-out;
     --page-animation-out: page-animation-cover-out var(--page-animation-time) ease-out;
-- 
2.39.5