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

update transition logic for svelte 4
This commit is contained in:
Kendell R 2024-01-11 06:56:16 -08:00 committed by GitHub
parent 66bb4b10f8
commit c90201f5f0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 12 additions and 18 deletions

View File

@ -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}

View File

@ -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

View File

@ -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" />

View File

@ -1,8 +1,4 @@
<script>
import { fade } from 'svelte/transition';
</script>
<div class="spinner" transition:fade={{ duration: 250 }} />
<div class="spinner" />
<style>
@keyframes spinner {

View File

@ -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} />

View File

@ -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>

View File

@ -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>

View File

@ -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;