feat(core): new page transitions in MD theme

framework7io · Sep 26, 2022 · b050a88 · b050a88
1 parent fae5446
commit b050a88
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 12 deletions.
diff --git a/src/core/components/page/page-md.less b/src/core/components/page/page-md.less
@@ -1,8 +1,10 @@
 .md {
+  .page-previous {
+    transform: translate3d(0, -32px, 0);
+  }
   .page-next {
-    opacity: 0;
     pointer-events: none;
-    transform: translate3d(0, 56px, 0);
+    transform: translate3d(0, 128px, 0);
     &.page-next-on-right {
       .ltr({
         transform: translate3d(100%, 0, 0);
@@ -15,38 +17,62 @@
   // Animations
   .router-transition-forward {
     .page-next {
-      animation: md-page-next-to-current var(--f7-page-transition-duration) forwards;
+      animation: md-page-next-to-current var(--f7-page-transition-duration) forwards
+        cubic-bezier(0, 0.8, 0.3, 1);
     }
     .page-current {
-      animation: none;
+      animation: md-page-current-to-previous var(--f7-page-transition-duration) forwards
+        cubic-bezier(0, 0.8, 0.3, 1);
     }
   }
   .router-transition-backward {
     .page-current {
-      animation: md-page-current-to-next var(--f7-page-transition-duration) forwards;
+      animation: md-page-current-to-next calc(var(--f7-page-transition-duration) / 4) forwards
+          cubic-bezier(0.8, 0, 1, 0.3),
+        md-page-current-to-next-opacity 0ms calc(var(--f7-page-transition-duration) / 4) forwards;
     }
     .page-previous {
-      animation: none;
+      animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
     }
   }
 }
 @keyframes md-page-next-to-current {
   from {
-    transform: translate3d(0, 56px, 0);
-    opacity: 0;
+    transform: translate3d(0, 128px, 0);
   }
   to {
     transform: translate3d(0, 0px, 0);
-    opacity: 1;
   }
 }
 @keyframes md-page-current-to-next {
   from {
     transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, 128px, 0);
+  }
+}
+@keyframes md-page-current-to-next-opacity {
+  from {
     opacity: 1;
   }
   to {
-    transform: translate3d(0, 56px, 0);
     opacity: 0;
   }
 }
+@keyframes md-page-current-to-previous {
+  from {
+    transform: translate3d(0, 0, 0);
+  }
+  to {
+    transform: translate3d(0, -32px, 0);
+  }
+}
+@keyframes md-page-previous-to-current {
+  from {
+    transform: translate3d(0, -32px, 0);
+  }
+  to {
+    transform: translate3d(0, 0px, 0);
+  }
+}
diff --git a/src/core/components/page/page-vars.less b/src/core/components/page/page-vars.less
@@ -33,7 +33,7 @@
 
 });
 .md-vars({
-  --f7-page-transition-duration: 250ms;
+  --f7-page-transition-duration: 400ms;
   --f7-page-title-font-size: 34px;
   --f7-page-title-font-weight: 500;
   --f7-page-title-letter-spacing: 0;

diff --git a/src/core/modules/router/router-class.js b/src/core/modules/router/router-class.js
@@ -362,7 +362,8 @@ class Router extends Framework7Class {
       if (callback) callback();
     }
 
-    (direction === 'forward' ? $newPageEl : $oldPageEl).animationEnd(() => {
+    // eslint-disable-next-line
+    (direction === 'forward' ? $newPageEl : ios ? $oldPageEl : $newPageEl).animationEnd(() => {
       onDone();
     });