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"
Если вам нужно добавить участок кода ставьте его между тегами <code></code>