SANHOPE.mes.web/wwwroot/Plugins/animate/xanimate.js

/*
 * xuwei 2021-11-26 v0.1
 * 应用于大屏看板动画
 * 
 */
const animateCSS = (element, animation, prefix = 'animate__') =>
    new Promise((resolve, reject) => {
        const animationName = `${prefix}${animation}`;
        const node = document.querySelector(element);
        node.classList.add(`${prefix}animated`, animationName);
        function handleAnimationEnd(event) {
            event.stopPropagation();
            node.classList.remove(`${prefix}animated`, animationName);
            resolve('Animation ended');
        }
        node.addEventListener('animationend', handleAnimationEnd, { once: true });
    });

//显示数量动画
function animateAddNum(id) {
    var num = Math.round(Math.random() * 10000);
    $(id).after("<div id='" + id.replace('#', '') + num + "' style='color:orange;position: absolute;left:" + ($(id).offset().left + 30) + "px;top:" + ($(id).offset().top - 20) + "px;'>+1</div>");
    animateCSS(id + num, 'fadeInUp').then((message) => {
        $(id).text(parseInt($(id).text()) + 1);
        animateCSS(id + num, 'fadeOutUp').then((message) => {
            $(id + num).remove();
        });
    });
}

//条码正常移动动画
function animateInLeftOutRight(id, title) {
    var num = Math.round(Math.random() * 10000);
    $(id).append("<div id='" + id.replace('#', '') + num + "' style='position: absolute;left:" + ($(id).offset().left + 20) + "px;top:" + ($(id).offset().top + 5) + "px;'>" + title + "</div>");
    animateCSS(id + num, 'fadeInLeft').then((message) => {
        animateCSS(id + num, 'fadeOutRight').then((message) => {
            $(id + num).remove();
        });
    });
}

//条码异常动画
function animateInLeftHinge(id, title) {
    var num = Math.round(Math.random() * 10000);
    $(id).append("<div id='" + id.replace('#', '') + num + "' style='position: absolute;left:" + ($(id).offset().left + 20) + "px;top:" + ($(id).offset().top + 5) + "px;'>" + title + "</div>");
    animateCSS(id + num, 'fadeInLeft').then((message) => {
        animateCSS(id + num, 'hinge').then((message) => {
            $(id + num).remove();
        });
    });
}