My current objective is to create a snackbar component with a Material-esque design that will emerge from the bottom of the screen and blur out once dismissed. Here is my current implementation:
<script lang="ts">
import '../css/snackbar.css';
import { linear } from 'svelte/easing';
import { blur, fly } from 'svelte/transition';
let show = true;
export let message: string;
export let actionText: string = 'Dismiss';
let options = { duration: 350, easing: linear };
</script>
{#if show}
<div
class="snackbar"
class:snackbar-active={Boolean(message)}
transition:blur={options}
>
<div class="snackbar-text">
{message}
</div>
<button class="link" on:click={() => (show = !show)}>{actionText}</button>
</div>
{:else}
<div
class="snackbar"
class:snackbar-active={Boolean(message)}
transition:fly={{ ...options, opacity: 1, y: 600 }}
>
<div class="snackbar-text">
{message}
</div>
<button class="link" on:click={() => (show = !show)}>{actionText}</button>
</div>
{/if}
Furthermore, here is the corresponding CSS:
.snackbar {
align-items: flex-end center;
background: var(--project-color-surface-variant);
border-radius: 0.5rem;
color: #fff;
display: inline-flex;
justify-content: flex-end center;
padding: 0.625rem 1.25rem 0.625rem 1.25rem;
position: fixed;
width: fit-content;
z-index: 9;
}
.snackbar .link {
background: none;
border: none;
color: var(--project-color-secondary);
display: inline-flex;
padding-left: 1.25rem;
}
Currently, the snackbar displays at the bottom of the screen, blurs out upon dismissal, then immediately reappears from the top before starting the cycle again if triggered. I aim for it to appear only when activated and disappear permanently upon user interaction.
I've attempted using CSS keyframes for transitions without success. Exploring the built-in Svelte transitions seemed promising, but I still seek a solution tailored to my specific requirements.