I'm struggling with a svelte component that I have and I'm trying to implement a slide down animation when it closes. The slide up animation is functioning correctly, but for some reason the slide down animation is not working. Does anyone have any suggestions on how I can resolve this issue?
<script lang="ts">
import { createEventDispatcher } from 'svelte';
export let show = false;
export let title: string | undefined;
const dispatch = createEventDispatcher();
let dialog: HTMLDialogElement | undefined;
$: if (dialog != null && show && !dialog.open) {
dialog.showModal();
dispatch('open');
}
const closeModal = () => {
show = false;
dialog?.close();
dispatch('close');
};
</script>
<dialog
bind:this={dialog}
aria-live="assertive"
on:close={closeModal}
on:click|self={() => dialog?.close()}
>
<div on:click|stopPropagation>
<div class="modal-header">
<div class="modal-title-container">
{#if title}
<h2 class="modal-title">{title}</h2>
{/if}
</div>
<button on:click={closeModal}> X </button>
</div>
<section class="modal-content">
<slot />
</section>
</div>
</dialog>
<style lang="scss">
dialog {
animation: slide-down 0.7s ease-out;
}
dialog[open] {
animation: slide-up 0.7s ease-out;
}
dialog[open]::backdrop {
animation: backdrop-fade-in 0.7s ease-out forwards;
}
@keyframes slide-up {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
@keyframes slide-down {
to {
transform: translateY(-110%);
}
}
@keyframes backdrop-fade-in {
0% {
background-color: rgb(0 0 0 / 0%);
}
100% {
background-color: rgb(0 0 0 / 25%);
}
}
</style>
There was an article that I came across where the fade transition was discussed and it's currently working fine, however, the slide down animation seems to be the problem: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog