fix(core): fix issue with custom page transitions

nolimits4web · nolimits4web · commit 933db6f598a0 · 2022-10-27T16:26:48.000+03:00
diff --git a/src/core/components/page/page-transitions/circle.less b/src/core/components/page/page-transitions/circle.less
@@ -20,22 +20,28 @@
     border-radius: 50%;
     animation: f7-circle-circle-in 400ms forwards;
   }
-  .page-next {
-    opacity: 0 !important;
-    transform: scale(0.9) !important;
-    animation: f7-circle-next-to-current 300ms forwards;
-    animation-delay: 300ms;
-    z-index: 150;
+  .ios &,
+  .md & {
+    .page-next {
+      opacity: 0;
+      transform: scale(0.9);
+      animation: f7-circle-next-to-current 300ms forwards;
+      animation-delay: 300ms;
+      z-index: 150;
+    }
   }
 }
 .router-transition-f7-circle-backward {
   &:after {
     animation: f7-circle-circle-out 300ms forwards;
     animation-delay: 350ms;
   }
-  .page-current {
-    animation: f7-circle-current-to-next 700ms forwards;
-    z-index: 150;
+  .ios &,
+  .md & {
+    .page-current {
+      animation: f7-circle-current-to-next 700ms forwards;
+      z-index: 150;
+    }
   }
 }
 @keyframes f7-circle-circle-in {
diff --git a/src/core/components/page/page-transitions/fade.less b/src/core/components/page/page-transitions/fade.less
@@ -4,20 +4,26 @@
   background: var(--f7-page-bg-color);
 }
 .router-transition-f7-fade-forward {
-  .page-next {
-    opacity: 0 !important;
-    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
-  }
-  .page-current {
-    animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+  .ios &,
+  .md & {
+    .page-next {
+      opacity: 0;
+      animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+    }
+    .page-current {
+      animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+    }
   }
 }
 .router-transition-f7-fade-backward {
-  .page-current {
-    animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
-  }
-  .page-previous {
-    animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+  .ios &,
+  .md & {
+    .page-current {
+      animation: f7-fade-out var(--f7-page-fade-transition-duration) forwards;
+    }
+    .page-previous {
+      animation: f7-fade-in var(--f7-page-fade-transition-duration) forwards;
+    }
   }
 }
 @keyframes f7-fade-in {
diff --git a/src/core/components/page/page-transitions/flip.less b/src/core/components/page/page-transitions/flip.less
@@ -5,27 +5,32 @@
   perspective: 1200px;
   .page {
     backface-visibility: hidden;
+    overflow: hidden;
   }
 }
 .router-transition-f7-flip-forward {
   .page-next {
+    transform-style: preserve-3d;
     animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;
   }
   .page-current {
+    transform-style: preserve-3d;
     animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;
   }
 }
 .router-transition-f7-flip-backward {
   .page-current {
+    transform-style: preserve-3d;
     animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;
   }
   .page-previous {
+    transform-style: preserve-3d;
     animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;
   }
 }
 @keyframes f7-flip-next-to-current {
   from {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(180deg);
     });
@@ -44,7 +49,7 @@
     transform: translateZ(0px) rotateY(0deg);
   }
   to {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(180deg);
     });
@@ -59,7 +64,7 @@
     transform: translateZ(0px) rotateY(0deg);
   }
   to {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(-180deg);
     });
@@ -70,7 +75,7 @@
 }
 @keyframes f7-flip-prev-to-current {
   from {
-    border-radius: 30px;
+    border-radius: 32px;
     .ltr({
       transform: translateZ(-100vmax) rotateY(-180deg);
     });

Original file line number	Diff line number	Diff line change
`@@ -5,27 +5,32 @@`
`5`	`5`	`perspective: 1200px;`
`6`	`6`	`.page {`
`7`	`7`	`backface-visibility: hidden;`
	`8`	`+ overflow: hidden;`
`8`	`9`	`}`
`9`	`10`	`}`
`10`	`11`	`.router-transition-f7-flip-forward {`
`11`	`12`	`.page-next {`
	`13`	`+ transform-style: preserve-3d;`
`12`	`14`	`animation: f7-flip-next-to-current var(--f7-page-flip-transition-duration) forwards;`
`13`	`15`	`}`
`14`	`16`	`.page-current {`
	`17`	`+ transform-style: preserve-3d;`
`15`	`18`	`animation: f7-flip-current-to-prev var(--f7-page-flip-transition-duration) forwards;`
`16`	`19`	`}`
`17`	`20`	`}`
`18`	`21`	`.router-transition-f7-flip-backward {`
`19`	`22`	`.page-current {`
	`23`	`+ transform-style: preserve-3d;`
`20`	`24`	`animation: f7-flip-current-to-next var(--f7-page-flip-transition-duration) forwards;`
`21`	`25`	`}`
`22`	`26`	`.page-previous {`
	`27`	`+ transform-style: preserve-3d;`
`23`	`28`	`animation: f7-flip-prev-to-current var(--f7-page-flip-transition-duration) forwards;`
`24`	`29`	`}`
`25`	`30`	`}`
`26`	`31`	`@keyframes f7-flip-next-to-current {`
`27`	`32`	`from {`
`28`		`- border-radius: 30px;`
	`33`	`+ border-radius: 32px;`
`29`	`34`	`.ltr({`
`30`	`35`	`transform: translateZ(-100vmax) rotateY(180deg);`
`31`	`36`	`});`
`@@ -44,7 +49,7 @@`
`44`	`49`	`transform: translateZ(0px) rotateY(0deg);`
`45`	`50`	`}`
`46`	`51`	`to {`
`47`		`- border-radius: 30px;`
	`52`	`+ border-radius: 32px;`
`48`	`53`	`.ltr({`
`49`	`54`	`transform: translateZ(-100vmax) rotateY(180deg);`
`50`	`55`	`});`
`@@ -59,7 +64,7 @@`
`59`	`64`	`transform: translateZ(0px) rotateY(0deg);`
`60`	`65`	`}`
`61`	`66`	`to {`
`62`		`- border-radius: 30px;`
	`67`	`+ border-radius: 32px;`
`63`	`68`	`.ltr({`
`64`	`69`	`transform: translateZ(-100vmax) rotateY(-180deg);`
`65`	`70`	`});`
`@@ -70,7 +75,7 @@`
`70`	`75`	`}`
`71`	`76`	`@keyframes f7-flip-prev-to-current {`
`72`	`77`	`from {`
`73`		`- border-radius: 30px;`
	`78`	`+ border-radius: 32px;`
`74`	`79`	`.ltr({`
`75`	`80`	`transform: translateZ(-100vmax) rotateY(-180deg);`
`76`	`81`	`});`