fix: fix transition logic for svelte 4 (#220)

update transition logic for svelte 4
ReVanced · Jan 11, 2024 · c90201f · c90201f
1 parent 66bb4b1
commit c90201f
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 18 deletions.
diff --git a/src/layout/Footer/FooterSection.svelte b/src/layout/Footer/FooterSection.svelte
@@ -25,7 +25,7 @@
 		/>
 	</button>
 	{#if expanded}
-		<ul transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<ul transition:slide={{ easing: quintOut, duration: 500 }}>
 			<slot />
 		</ul>
 	{/if}

diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
@@ -27,7 +27,7 @@
 			alt="Clear"
 			on:click={clear}
 			on:keypress={clear}
-			transition:fade|local={{ easing: quintOut, duration: 250 }}
+			transition:fade={{ easing: quintOut, duration: 250 }}
 		/>
 	{/if}
 	<input

diff --git a/src/lib/components/Snackbar.svelte b/src/lib/components/Snackbar.svelte
@@ -3,7 +3,6 @@
 	import { expoOut } from 'svelte/easing';
 
 	export let open = false;
-	export let closeIcon = false;
 	export let dismissTime = 3000;
 
 	let timeout: ReturnType<typeof setTimeout>;
@@ -16,9 +15,8 @@
 {#if open}
 	<div
 		class="snackbar"
-		class:closeIcon
-		in:slide|local={{ duration: 400, easing: expoOut }}
-		out:fade|local={{ duration: 300, easing: expoOut }}
+		in:slide={{ duration: 400, easing: expoOut }}
+		out:fade={{ duration: 300, easing: expoOut }}
 	>
 		<div class="text">
 			<slot name="text" />

diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
@@ -1,8 +1,4 @@
-<script>
-	import { fade } from 'svelte/transition';
-</script>
-
-<div class="spinner" transition:fade={{ duration: 250 }} />
+<div class="spinner" />
 
 <style>
 	@keyframes spinner {

diff --git a/src/routes/contributors/ContributorSection.svelte b/src/routes/contributors/ContributorSection.svelte
@@ -33,7 +33,7 @@
 	</div>
 
 	{#if expanded}
-		<div class="contrib-host" transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<div class="contrib-host" transition:slide={{ easing: quintOut, duration: 500 }}>
 			{#each contributors as { login, avatar_url, html_url }}
 				{#if !usersIwantToExplodeSoBadly.includes(login)}
 					<ContributorButton name={login} pfp={avatar_url} url={html_url} />

diff --git a/src/routes/donate/+page.svelte b/src/routes/donate/+page.svelte
@@ -195,7 +195,7 @@
 	</svelte:fragment>
 </Dialogue>
 
-<Snackbar bind:open={addressSnackbar} closeIcon>
+<Snackbar bind:open={addressSnackbar}>
 	<svelte:fragment slot="text">Address copied to clipboard</svelte:fragment>
 </Snackbar>
 

diff --git a/src/routes/donate/TeamMember.svelte b/src/routes/donate/TeamMember.svelte
@@ -13,9 +13,9 @@
 	href={member.html_url}
 	rel="noreferrer"
 	target="_blank"
-	in:fly={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }}
+	in:fly|global={{ y: 10, easing: quintOut, duration: 750, delay: 50 * i }}
 >
-	<img src={member.avatar_url} alt={`${member.login}'s profile picture.'`} />
+	<img src={member.avatar_url} alt="{member.login}'s profile picture." />
 
 	<div class="member-text">
 		<h4>{member.login}</h4>

diff --git a/src/routes/patches/PatchItem.svelte b/src/routes/patches/PatchItem.svelte
@@ -90,8 +90,8 @@
 	</ul>
 
 	{#if expanded && hasPatchOptions}
-		<span transition:fade|local={{ easing: quintOut, duration: 1000 }}>
-			<div class="options" transition:slide|local={{ easing: quintOut, duration: 500 }}>
+		<span transition:fade={{ easing: quintOut, duration: 1000 }}>
+			<div class="options" transition:slide={{ easing: quintOut, duration: 500 }}>
 				{#each patch.options as option}
 					<div class="option">
 						<h5 id="option-title">{option.title}</h5>
@@ -125,7 +125,7 @@
 		display: flex;
 		align-items: center;
 	}
-	
+
 	.patch-info {
 		display: flex;
 		justify-content: center;