feat: tweak MD page transitions directions

Author: nolimits4web

src/core/components/page/page-ios.less

@@ -15,14 +15,7 @@
       transform: translate3d(100%, 0, 0);
     }
   });
-  .page-previous {
-    .page-opacity-effect {
-      opacity: 1;
-    }
-    &:after {
-      opacity: 1;
-    }
-  }
+
   .page-current {
     .page-shadow-effect {
       opacity: 1;

src/core/components/page/page-md.less

@@ -1,10 +1,10 @@
 .md {
   .page-previous {
-    transform: translate3d(0, -20px, 0);
+    transform: translate3d(-24px, 0px, 0);
   }
   .page-next {
     pointer-events: none;
-    transform: translate3d(0, 128px, 0);
+    transform: translate3d(128px, 0px, 0);
     opacity: 0;
     &.page-next-on-right {
       .ltr({
@@ -32,29 +32,30 @@
   .router-transition-backward {
     .page-current {
       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;
+        md-page-current-to-next calc(var(--f7-page-transition-duration) / 2) forwards
+          cubic-bezier(0, 1, 0.8, 1),
+        md-page-current-to-next-opacity calc(var(--f7-page-transition-duration) / 2) forwards;
     }
     .page-previous {
-      animation: md-page-previous-to-current var(--f7-page-transition-duration) forwards;
+      animation: md-page-previous-to-current calc(var(--f7-page-transition-duration) / 2) forwards
+        cubic-bezier(0, 1, 0.8, 1);
     }
   }
 }
 @keyframes md-page-next-to-current {
   from {
-    transform: translate3d(0, 128px, 0);
+    transform: translate3d(128px, 0px, 0);
   }
   to {
-    transform: translate3d(0, 0px, 0);
+    transform: translate3d(0px, 0px, 0);
   }
 }
 @keyframes md-page-current-to-next {
   from {
     transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translate3d(0, 128px, 0);
+    transform: translate3d(128px, 0px, 0);
   }
 }
 @keyframes md-page-current-to-next-opacity {
@@ -70,12 +71,12 @@
     transform: translate3d(0, 0, 0);
   }
   to {
-    transform: translate3d(0, -20px, 0);
+    transform: translate3d(-24px, 0px, 0);
   }
 }
 @keyframes md-page-previous-to-current {
   from {
-    transform: translate3d(0, -20px, 0);
+    transform: translate3d(-24px, 0px, 0);
   }
   to {
     transform: translate3d(0, 0px, 0);

src/core/components/page/page.less

@@ -42,6 +42,14 @@
       var(--f7-page-content-extra-padding-bottom, 0px)
   );
 }
+.page-previous {
+  .page-opacity-effect {
+    opacity: 1;
+  }
+  &:after {
+    opacity: 1;
+  }
+}
 .page-transitioning {
   &,
   .page-shadow-effect,

src/core/components/toolbar/toolbar-md.less

@@ -13,7 +13,7 @@
       height: var(--f7-toolbar-link-height, var(--f7-toolbar-height));
     }
     a:is(.icon-only, :has(i:only-child), :has(svg:only-child)) {
-      min-width: 0;
+      min-width: 48px;
       flex-shrink: 0;
       padding: 0;
     }

src/core/components/view/view.js

@@ -74,7 +74,7 @@ export default {
       iosSwipeBackThreshold: 0,
       mdSwipeBack: false,
       mdSwipeBackAnimateShadow: true,
-      mdSwipeBackAnimateOpacity: false,
+      mdSwipeBackAnimateOpacity: true,
       mdSwipeBackActiveArea: 30,
       mdSwipeBackThreshold: 0,
       // Push State

src/core/modules/router/swipe-back.js

@@ -148,6 +148,7 @@ function SwipeBack(r) {
     // Transform pages
     let currentPageTranslate = touchesDiff * inverter;
     let previousPageTranslate = (touchesDiff / 5 - viewContainerWidth / 5) * inverter;
+
     if (!app.rtl) {
       currentPageTranslate = Math.min(currentPageTranslate, viewContainerWidth);
       previousPageTranslate = Math.min(previousPageTranslate, 0);
@@ -166,9 +167,7 @@ function SwipeBack(r) {
     $currentPageEl.transform(`translate3d(${currentPageTranslate}px,0,0)`);
     if (paramsSwipeBackAnimateShadow) $pageShadowEl[0].style.opacity = 1 - 1 * percentage;
 
-    if (app.theme === 'ios') {
-      $previousPageEl.transform(`translate3d(${previousPageTranslate}px,0,0)`);
-    }
+    $previousPageEl.transform(`translate3d(${previousPageTranslate}px,0,0)`);
     if (paramsSwipeBackAnimateOpacity) $pageOpacityEl[0].style.opacity = 1 - 1 * percentage;
   }
   function handleTouchEnd(e) {