Merge pull request #113 from takuma-ru/fix/112

⚡️ Will-change is given during animation and dragging
takuma-ru · May 29, 2024 · 5c05f7c · 5c05f7c
2 parents b722fb5 + 419e8e0
commit 5c05f7c
Show file tree

Hide file tree

Showing 6 changed files with 3,269 additions and 2,655 deletions.
diff --git a/packages/core/.vscode/settings.json b/packages/core/.vscode/settings.json
@@ -15,8 +15,8 @@
 
 	// Auto fix
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": "explicit",
-		"source.fixAll.stylelint": "explicit",
+		"source.fixAll.eslint": "always",
+		"source.fixAll.stylelint": "always",
 		"source.organizeImports": "never",
 		"source.addMissingImports": "explicit"
 	},

diff --git a/packages/core/src/components/SwipeModal/SwipeModal.vue b/packages/core/src/components/SwipeModal/SwipeModal.vue
@@ -6,6 +6,7 @@ import { useModalAnim } from "../../hooks/useModalAnim";
 import { useCssVar } from "../../hooks/useCssVar";
 import { ANIMATION_EASING } from "../../constants";
 import { setPageScrollable } from "../../utils/setPageScrollable";
+import { removeWillChange, setWillChange } from "../../utils/willChange";
 import type { SwipeModalEmits, SwipeModalProps } from "./SwipeModal.types";
 
 const props = withDefaults(defineProps<SwipeModalProps>(), {
@@ -122,16 +123,23 @@ const handleOpenModal = () => {
 	const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
 
 	if (!isFirefox) {
+		setWillChange(modalRef.value, "opacity");
 		modalRef.value.animate([
 			{ opacity: 0 },
 			{ opacity: 1 },
 		], {
 			duration: 200,
 			pseudoElement: "::backdrop",
 			easing: ANIMATION_EASING,
-		});
+		}).onfinish = () => {
+			if (!modalRef.value)
+				return;
+
+			removeWillChange(modalRef.value);
+		};
 	}
 
+	setWillChange(modalRef.value, "bottom");
 	modalRef.value.animate(
 		[
 			{
@@ -156,6 +164,11 @@ const handleOpenModal = () => {
 		if (props.isScrollLock)
 			setPageScrollable("hidden");
 	};
+
+	if (!modalRef.value)
+		return;
+
+	removeWillChange(modalRef.value);
 };
 
 /**
@@ -167,6 +180,7 @@ const handleCloseModal = () => {
 
 	const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
 
+	setWillChange(modalRef.value, "opacity");
 	if (!isFirefox) {
 		modalRef.value.animate([
 			{ opacity: 1 },
@@ -175,9 +189,15 @@ const handleCloseModal = () => {
 			duration: 300,
 			pseudoElement: "::backdrop",
 			easing: ANIMATION_EASING,
-		});
+		}).onfinish = () => {
+			if (!modalRef.value)
+				return;
+
+			removeWillChange(modalRef.value);
+		};
 	}
 
+	setWillChange(modalRef.value, "bottom");
 	modalRef.value.animate(
 		[
 			{
@@ -204,6 +224,11 @@ const handleCloseModal = () => {
 		modalRef.value?.style.setProperty("visibility", "hidden");
 
 		setPageScrollable("reset");
+
+		if (!modalRef.value)
+			return;
+
+		removeWillChange(modalRef.value);
 	};
 };
 

diff --git a/packages/core/src/hooks/useModalAnim.ts b/packages/core/src/hooks/useModalAnim.ts
@@ -1,6 +1,7 @@
 import type { Ref } from "vue";
 import type { SwipeModalProps } from "../components/SwipeModal/SwipeModal.types";
 import { ANIMATION_EASING } from "../constants";
+import { removeWillChange, setWillChange } from "../utils/willChange";
 import { useCssVar } from "./useCssVar";
 
 interface UseModalAnimProps {
@@ -42,6 +43,7 @@ export const useModalAnim = ({
 			return "-100%";
 		};
 
+		setWillChange(modalRef.value, "bottom");
 		modalRef.value.animate(
 			[
 				{ bottom: getCssVar("bottom") },
@@ -62,6 +64,11 @@ export const useModalAnim = ({
 				name: "bottom",
 				value: calcToPositionBottom(),
 			});
+
+			if (!modalRef.value)
+				return;
+
+			removeWillChange(modalRef.value);
 		};
 	};
 
@@ -75,6 +82,7 @@ export const useModalAnim = ({
 		if (!props.snapPoint)
 			return;
 
+		setWillChange(modalRef.value, "bottom");
 		modalRef.value.animate(
 			[
 				{ bottom: getCssVar("bottom") },
@@ -96,6 +104,11 @@ export const useModalAnim = ({
 				value: getCssVar("snapPointPosition"),
 			});
 			positionStatus.value = "snap";
+
+			if (!modalRef.value)
+				return;
+
+			removeWillChange(modalRef.value);
 		};
 	};
 
@@ -106,6 +119,7 @@ export const useModalAnim = ({
 		if (!modalRef.value)
 			return;
 
+		setWillChange(modalRef.value, "bottom");
 		modalRef.value.animate(
 			[
 				{ bottom: getCssVar("bottom") },
@@ -127,6 +141,11 @@ export const useModalAnim = ({
 				value: "0%",
 			});
 			positionStatus.value = "full";
+
+			if (!modalRef.value)
+				return;
+
+			removeWillChange(modalRef.value);
 		};
 	};
 

diff --git a/packages/core/src/hooks/usePointerEvent.ts b/packages/core/src/hooks/usePointerEvent.ts
@@ -1,6 +1,7 @@
 import type { Ref, WritableComputedRef } from "vue";
 import { ref } from "vue";
 import type { SwipeModalProps } from "../components/SwipeModal/SwipeModal.types";
+import { setWillChange } from "../utils/willChange";
 import { useModalAnim } from "./useModalAnim";
 import { useCssVar } from "./useCssVar";
 
@@ -68,6 +69,11 @@ export const usePointerEvent = ({
 		else startPositionY.value = touchEvent.touches[0].clientY;
 
 		isMouseDown.value = true;
+
+		if (!modalRef.value)
+			return;
+
+		setWillChange(modalRef.value, "bottom");
 	};
 
 	/**

diff --git a/packages/core/src/utils/willChange.ts b/packages/core/src/utils/willChange.ts
@@ -0,0 +1,7 @@
+export const setWillChange = (element: HTMLElement, value: string) => {
+	element.style.setProperty("will-change", value);
+};
+
+export const removeWillChange = (element: HTMLElement) => {
+	element.style.removeProperty("will-change");
+};