N
N
Nickzagumen2021-05-21 09:08:12
css
Nickzagumen, 2021-05-21 09:08:12

How to add animation on modal close via animate.css?

<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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
R
RAX7, 2021-05-21
@RAX7

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question