Merge pull request #101 from takuma-ru/fix/94

🐛 Fixed `::backdrop` attribute animation not to run in firefox.
takuma-ru · May 9, 2024 · 9faf206 · 9faf206
2 parents 15ba259 + 108c29f
commit 9faf206
Showing 1 changed file with 24 additions and 16 deletions.
diff --git a/packages/core/src/components/SwipeModal/SwipeModal.vue b/packages/core/src/components/SwipeModal/SwipeModal.vue
@@ -119,14 +119,18 @@ const handleOpenModal = () => {
 
 	modalRef.value?.style.setProperty("visibility", "visible");
 
-	modalRef.value.animate([
-		{ opacity: 0 },
-		{ opacity: 1 },
-	], {
-		duration: 200,
-		pseudoElement: "::backdrop",
-		easing: ANIMATION_EASING,
-	});
+	const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+
+	if (!isFirefox) {
+		modalRef.value.animate([
+			{ opacity: 0 },
+			{ opacity: 1 },
+		], {
+			duration: 200,
+			pseudoElement: "::backdrop",
+			easing: ANIMATION_EASING,
+		});
+	}
 
 	modalRef.value.animate(
 		[
@@ -161,14 +165,18 @@ const handleCloseModal = () => {
 	if (!modalRef.value)
 		return;
 
-	modalRef.value.animate([
-		{ opacity: 1 },
-		{ opacity: 0 },
-	], {
-		duration: 300,
-		pseudoElement: "::backdrop",
-		easing: ANIMATION_EASING,
-	});
+	const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+
+	if (!isFirefox) {
+		modalRef.value.animate([
+			{ opacity: 1 },
+			{ opacity: 0 },
+		], {
+			duration: 300,
+			pseudoElement: "::backdrop",
+			easing: ANIMATION_EASING,
+		});
+	}
 
 	modalRef.value.animate(
 		[