I have this svelte component and I want to do a slide down animation when it get's closed. The slide up animation is working, however the slide down not. Does anyone have an idea how to fix that?
<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>I saw this article and the fade transition is working, however not the slide down https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog