I have a modal sliding up fine in React using keyframes. I want it to slide down when closing. The slide up is triggered by a state and I am trying to trigger the slide down by setting the class to happen when the user clicks to close the button.

Not sure how to achieve this with keyframes.

Here is my code:

JSX

  <div
        className={classnames(styles.modal, {
            [styles.toDisplayModal]: showModal,
            [styles.toCloseModal]: closeModal,
        })}
    >
            <div className={styles.container}>
                    <CloseButton onClick={closeModal} />
                   <div> text </div>
            </div>
  </div>

CSS modules & Key frames

.toDisplayModal{
    margin: auto;
    top: 10%;
    position: fixed;
    z-index: 999;
    height: 100%;
    animation: slideup 0.3s;
}

.toCloseModal {
    animation: slidedown 0.3s;
}

@keyframes slideup {
    0% {
        transform: translateY(400px);
        animation-timing-function: ease-out;
    }
    60% {
        transform: translateY(20px);
        animation-timing-function: ease-in;
    }
    80% {
        transform: translateY(10px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY(0px);
        animation-timing-function: ease-in;
    }
}
@keyframes slidedown {
    100% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
    80% {
        transform: translateY(10px);
        animation-timing-function: ease-in;
    }
    60% {
        transform: translateY(20px);
        animation-timing-function: ease-out;
    }
    0% {
        transform: translateY(400px);
        animation-timing-function: ease-in;
 

} }

CodePudding user response：

You need to add animation-fill-mode: forwards;.

.toDisplayModal{
    margin: auto;
    top: 10%;
    position: fixed;
    z-index: 999;
    height: 100%;
    border: 1px solid red;
    animation: slidedown 0.3s 1;
    animation-fill-mode: forwards;
}


@keyframes slidedown {
    0% {
        transform: translateY(0px);
        animation-timing-function: ease-out;
    }
    60% {
        transform: translateY(10px);
        animation-timing-function: ease-in;
    }
    80% {
        transform: translateY(20px);
        animation-timing-function: ease-out;
    }
    100% {
        transform: translateY(400px);
        animation-timing-function: ease-in;
    }
}

<div class="toDisplayModal">
    Modal
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

the first part of .toDisplayModal needs to be put inside .modal because this is the part responsible for showing the modal.

{
    margin: auto;
    top: 10%;
    position: fixed;
    z-index: 999;
    height: 100%;
}

because you want the modal to be shown when it slides down.