feat(core): prevent page scrolling during custom page transitions

nolimits4web · nolimits4web · commit 645324951a76 · 2023-04-06T11:12:39.000+03:00
diff --git a/src/core/components/page/page-transitions/circle.less b/src/core/components/page/page-transitions/circle.less
@@ -13,6 +13,9 @@
     background: var(--f7-page-bg-color);
     z-index: 100;
   }
+  .page {
+    pointer-events: none;
+  }
 }
 .router-transition-f7-circle-forward {
   &:after {
diff --git a/src/core/components/page/page-transitions/cover-v.less b/src/core/components/page/page-transitions/cover-v.less
@@ -3,6 +3,9 @@
 .router-transition-f7-cover-v-backward {
   background: #000;
   perspective: 1200px;
+  .page {
+    pointer-events: none;
+  }
 }
 .router-transition-f7-cover-v-forward {
   .page-next {
diff --git a/src/core/components/page/page-transitions/cover.less b/src/core/components/page/page-transitions/cover.less
@@ -3,6 +3,9 @@
 .router-transition-f7-cover-backward {
   background: #000;
   perspective: 1200px;
+  .page {
+    pointer-events: none;
+  }
 }
 .router-transition-f7-cover-forward {
   .page-next {
diff --git a/src/core/components/page/page-transitions/dive.less b/src/core/components/page/page-transitions/dive.less
@@ -3,6 +3,9 @@
 .router-transition-f7-dive-backward {
   background: var(--f7-page-bg-color);
   perspective: 1200px;
+  .page {
+    pointer-events: none;
+  }
 }
 .router-transition-f7-dive-forward {
   .page-next {
diff --git a/src/core/components/page/page-transitions/fade.less b/src/core/components/page/page-transitions/fade.less
@@ -2,6 +2,9 @@
 .router-transition-f7-fade-forward,
 .router-transition-f7-fade-backward {
   background: var(--f7-page-bg-color);
+  .page {
+    pointer-events: none;
+  }
 }
 .router-transition-f7-fade-forward {
   .ios &,
diff --git a/src/core/components/page/page-transitions/flip.less b/src/core/components/page/page-transitions/flip.less
@@ -6,6 +6,7 @@
   .page {
     backface-visibility: hidden;
     overflow: hidden;
+    pointer-events: none;
   }
 }
 .router-transition-f7-flip-forward {
diff --git a/src/core/components/page/page-transitions/parallax.less b/src/core/components/page/page-transitions/parallax.less
@@ -1,5 +1,8 @@
 // f7-parallax
 .router-transition-f7-parallax-forward {
+  .page {
+    pointer-events: none;
+  }
   .page-next {
     animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;
   }
@@ -8,6 +11,9 @@
   }
 }
 .router-transition-f7-parallax-backward {
+  .page {
+    pointer-events: none;
+  }
   .page-current {
     animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;
   }
diff --git a/src/core/components/page/page-transitions/push.less b/src/core/components/page/page-transitions/push.less
@@ -1,5 +1,8 @@
 // f7-Push
 .router-transition-f7-push-forward {
+  .page {
+    pointer-events: none;
+  }
   .page-next {
     animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;
   }
@@ -8,6 +11,9 @@
   }
 }
 .router-transition-f7-push-backward {
+  .page {
+    pointer-events: none;
+  }
   .page-current {
     animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;
   }

Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,9 @@`
`13`	`13`	`background: var(--f7-page-bg-color);`
`14`	`14`	`z-index: 100;`
`15`	`15`	`}`
	`16`	`+ .page {`
	`17`	`+ pointer-events: none;`
	`18`	`+ }`
`16`	`19`	`}`
`17`	`20`	`.router-transition-f7-circle-forward {`
`18`	`21`	`&:after {`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`.page {`
`7`	`7`	`backface-visibility: hidden;`
`8`	`8`	`overflow: hidden;`
	`9`	`+ pointer-events: none;`
`9`	`10`	`}`
`10`	`11`	`}`
`11`	`12`	`.router-transition-f7-flip-forward {`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
`1`	`1`	`// f7-parallax`
`2`	`2`	`.router-transition-f7-parallax-forward {`
	`3`	`+ .page {`
	`4`	`+ pointer-events: none;`
	`5`	`+ }`
`3`	`6`	`.page-next {`
`4`	`7`	`animation: f7-parallax-next-to-current var(--f7-page-parallax-transition-duration) forwards;`
`5`	`8`	`}`
`@@ -8,6 +11,9 @@`
`8`	`11`	`}`
`9`	`12`	`}`
`10`	`13`	`.router-transition-f7-parallax-backward {`
	`14`	`+ .page {`
	`15`	`+ pointer-events: none;`
	`16`	`+ }`
`11`	`17`	`.page-current {`
`12`	`18`	`animation: f7-parallax-current-to-next var(--f7-page-parallax-transition-duration) forwards;`
`13`	`19`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,8 @@`
`1`	`1`	`// f7-Push`
`2`	`2`	`.router-transition-f7-push-forward {`
	`3`	`+ .page {`
	`4`	`+ pointer-events: none;`
	`5`	`+ }`
`3`	`6`	`.page-next {`
`4`	`7`	`animation: f7-push-next-to-current var(--f7-page-push-transition-duration) forwards;`
`5`	`8`	`}`
`@@ -8,6 +11,9 @@`
`8`	`11`	`}`
`9`	`12`	`}`
`10`	`13`	`.router-transition-f7-push-backward {`
	`14`	`+ .page {`
	`15`	`+ pointer-events: none;`
	`16`	`+ }`
`11`	`17`	`.page-current {`
`12`	`18`	`animation: f7-push-current-to-next var(--f7-page-push-transition-duration) forwards;`
`13`	`19`	`}`