CSS анимация на JS ajax

Простой пример анимации на css.

Примеры анимации можно найти здесь:
https://daneden.github.io/animate.css/

Ниже пример, как сделать одну из любой анимации оттуда или вообще, чтобы все работало.

HTML

<div class="message">
    <div class="js-message animated pulse"></div>
</div>

Контейнер message нужен для обрамления анимации, чтобы внутри него можно было с ней делать, что душе захочется.

js-message — класс, за который будем цепляться в JS.

animated pulse — классы, которые описывают саму анимацию.

И еще у нас будет класс hidden, который буде вешаться и убираться через JS. Это создаст анимацию в уже присутствующих классах.

SCSS

.message {
    margin: 10px 0;
    text-align: center;
    color: maroon;
    position: relative;

    // Обязательно для анимации!
    display: block;

    .animated {
        position: absolute;
        width: 100%;
        top: 0px;
       
        animation-duration: 3s;
        animation-fill-mode: both;
    }

    .pulse {
        -webkit-animation-name: pulse;
        animation-name: pulse;
    }

    @keyframes pulse {
        from {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }

        50% {
            -webkit-transform: scale3d(1.05, 1.05, 1.05);
            transform: scale3d(1.05, 1.05, 1.05);
        }

        to {
            -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
        }
    }
}

JS

Пример функции отправки в wordpress jquery ajax запроса на бэк. Анимация будет появляться при получении ответа с бэка.

Функцию максимально упростил, оставил самое нужное для наглядности.

Класс hidden мы навешиваем при нажатии на ссылку. А снимаем после прихода ответа. Тем самым происходит анимация.

+function increase() {
    let link = document.querySelector('.js-link');

    if (!link) {
        return;
    }

    let message = document.querySelector('.js-message'),
        stop    = false;

    link.addEventListener('click', function (e) {
        if (stop) {
            return;
        }

        let current      = e.target,
            currentClass = current.classList.contains('js-link');

        if (!currentClass) {
            return;
        }

        message.classList.add('hidden');

        jQuery.ajax({
            method  : 'post',
            dataType: 'json',
            url     : ajax.ajaxurl,
            data    : {
                action: 'increase',
            },
            success : function () {
                message.classList.remove('hidden');
                stop = true;
            }
        });
    });
}();
Метки:

У сайта нет цели самоокупаться, поэтому на сайте нет рекламы. Но если вам пригодилась информация, можете лайкнуть страницу, оставить комментарий или отправить мне подарок на чашечку кофе.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"CSS анимация на JS ajax"