Как добавить анимацию при закрытии модального окна через animate.css?

Question

[Nickzagumen]

<section class="feedback">
            <div class="feedback__wrapper">
                <div class="feedback__item">
                    <img src="images/form-img.jpg" alt="">
                </div>
                <div class="feedback__item feedback__item--btn">
                    <button class="feedback__btn feedbtn">Оставить заявку</button>
                </div>
            </div>
        </section>

        <div class="modal_form feedform popup animate__animated animate__fadeIn">
            <div class="modal_form__wrapper">
                <div class="modal_form__title">Обратная связь</div>
                <form action="">
                    <input type="text" placeholder="Ваше имя">
                    <input type="text" placeholder="Электронная почта">
                    <input type="text" placeholder="Номер телефона">
                    <select name="select" id="">
                        <option value="Выбор 1">Выбор 1</option>
                        <option value="Выбор 2">Выбор 2</option>
                        <option value="Выбор 3">Выбор 3</option>
                    </select>
                </form>
            </div>
        </div>
<code lang="javascript">
const feedBtn = document.querySelectorAll('.feedbtn');
    const feedForm = document.querySelector('.modal_form.feedform.popup');
    const opnbody = document.querySelector('body');

    for (const feedBackBtn of feedBtn) {
        feedBackBtn.addEventListener('click', () => {
            feedForm.style.display = 'block';
            feedForm.style.setProperty('--animate-duration', '.5s');
            opnbody.style.overflow = 'hidden';
            opnbody.style.padding = "0 17px 0 0";
        })
    }

    const allPopup = document.querySelectorAll('.feedform');
    
    allPopup.forEach((feedForm) => {
        feedForm.addEventListener('click', (event) => {
            const target = event.target;
            const popForm = target.closest('.modal_form__wrapper');

            if (!popForm) {
                feedForm.style.display='none';
                opnbody.style.overflow='auto';
                opnbody.style.padding = "0";
            }
        })
    })
</code>

Comments

[ProjectSoft]

А причём здесь animate.css?
Открытие и закрытие popup вы исполняете сами с помощью JS.
Единственное - вам нужно будет присваивать определённые классы для открывающегося/закрывающегося окна.
Естественно в функции открытия и закрытия должны быть таймерные функции.
Например. Закрытие окна. Клик по кнопке -> анимация исчезновения -> по завершению анимации display: none;

Answer 1

[RAX7]