Sleek dialog sliding animation with Svelte

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

Answer №1

I managed to figure it out independently. Here's how I revised my keyframes:

@keyframes slide-down {
    from {
        visibility: visible;
    }

    to {
        transform: translateY(100%);
        visibility: hidden;
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Choose an element on a webpage by leveraging the power of Selenium

When working with Selenium in FireFox, I encountered an issue while trying to select specific fields on a webpage. The HTML pages I am referring to are available at the following links: Sample HTML Page, another sample page. The code snippet I used is sh ...

Issues with the performance of input range sliders in iOS Safari is causing frustration

I recently developed a basic range slider component for an application built with NextJS. This component utilizes an <input type="range"> element. While the range slider functions properly on Desktop and Android devices, I encountered sign ...

Utilizing objects from a JSON file within an HTML document

I'm currently in the process of creating a comprehensive to-do list, and I want to establish a JSON file that will link all the items on the list together. Despite my efforts, I find myself uncertain about the exact steps I need to take and the speci ...

Opacity: When the value is set to 0, the element remains invisible even when hovered over

I'm encountering an issue with configuring an element to have absolute positioning and a width and height of 100% while setting its opacity to 1.0. To summarize, here is the HTML code I am working with: <ul class="properties"> <li style ...

Could a class method be accessed from outside a nested handler method in JavaScript?

I am trying to make an XMLHttpRequest to a server using JavaScript. In the handler function, I need to call a method from the surrounding class. Is there a way to achieve this? Understanding how this works in JavaScript can be confusing. I have experiment ...

Using Javascript to attach <head> elements can be accomplished with the .innerHTML property, however, it does not work with XML child nodes

Exploring new ways to achieve my goal here! I want to include one JS and one jQuery attachment for each head section on every page of my static website. My files are: home.html <head> <script src="https://ajax.googleapis.com/ajax/libs/jquer ...

Creating a collaborative storage space within a MERN project folder

Currently, I am developing an application using the MERN stack. The structure of my project repository includes both backend and frontend components: my-project/ ├── backend/ │ │ │ . │ . │ └── package.json ├── fronten ...

Removing the element generated by Angular from the DOM

I've hit a roadblock with this issue. Here is the delete function in my mainController. $scope.delete = function($posts) { $http.delete('/api/posts/' + $posts._id) .success(function(data) { // remove element from DOM ...

Retrieving the chosen option from a radio button

<!DOCTYPE html> <html> <body> <input type="radio" name="colors" value="red" id="myRadio">Red color <p>Click the "Try it" button to display the value of the value attribute of the radio button.</p> <button onclick=" ...

Unexpected behavior from vuelidate triggered on blur

I have implemented vuelidate for form validation. My goal is to validate user input either when they move to the next input field or click outside of the current one. <div class="form-group col-md-6" :class="{invalid: $v.partner.email.$ ...

Leverage the power of HTML, CSS, and Bootstrap within Visual Studio 2022 when developing with

Could someone help me figure out how to implement HTML, CSS, and JavaScript design in Visual Studio 2022 while utilizing ASP.NET controls for coding purposes? I am encountering difficulties in starting my work on a website project. Any assistance would be ...

JavaScript: Employ array destructuring for improved code readability (eslintprefer-destructuring)

How can I resolve the ESLint error that says "Use array destructuring. eslint(prefer-destructuring)"? The error occurs on this line of my code: let foo = 1; foo = obj.data[i][1]; //ESLint error on this line If anyone could provide assistance in fixing thi ...

li tag style

I need to insert a check mark inside the <li> tag on the right side. How can I do this? The check mark looks like this: For example: http://jsfiddle.net/HpVcy/ ul li{ padding: 3px 10px 3px 10px; background:url(http://img4up.com/up2/730897458613759 ...

Exploring the power of Vue3 with Shadow DOM in web components

I've been experimenting with web components using Vue3 and I'm curious about how the Shadow DOM works. I encountered an issue where a third party library was trying to access elements using getElementById() and it was throwing an error because th ...

Looking to activate a button upon clicking a button on a different page using php and javascript

Is it possible for the first user logged in on one page to have a button, and when clicked, enable a disabled button on another page where the second user is logged in? This functionality needs to be implemented using PHP/JavaScript. Thank you in advance ...

Finding the height of concealed content within a div using the overflow:hidden setup

I'm trying to create a div that expands when clicked to reveal its content. I've taken the following steps so far: Established a div with overflow:hidden property Developed a JavaScript function that switches between a "minimized" and "maximize ...

React - Can you explain the purpose of the callback function in the forceUpdate method?

The React documentation mentions that the forceUpdate method includes a parameter called callback. Does this function in any way resemble the second parameter found in setState, which is executed after setting state? Or does it serve a different purpose? ...

Utilizing AJAX within a Rails application to dynamically alter a database field without the need for a traditional form

I am facing a scenario where I have implemented a table with certain rows structured as follows: <div class="row chord-table-row" id= <%= "chord-#{chord.id}" %>> <div class="small-1 columns"><%= chord.id %></div> < ...

What's the best way to implement a conditional header in React?

I am looking to create a conditional display of the Header based on different pages. Specifically, I want the Header to be hidden on the Home page and shown on other pages like posts page, projects page, etc. I have been brainstorming possible solutions f ...

Bootstrap - Struggling to achieve responsiveness on the page

I've recently designed a website with a mega menu feature. However, as I try to resize the page, the layout doesn't adjust well, and some elements appear to be overflowing beyond the screen. Unfortunately, I can't share the entire code. Cou ...