Question

我试图更改AJAX代码以添加一个小的更改效果，以便用户可以看到屏幕上发生的事情，导致内容的更改被隐藏，很难注意到只有一些数字发生了变化

＆＃13;

function changeBox(post) {
    if (http != null) {
        http.open("POST", 'ajaxchangebox.php', true);
        http.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        http.onreadystatechange = function() {
            if (!http) {
                return;
            }
            if (http.readyState == 4) {
                 document.getElementById("box").innerHTML = http.responseText;;
                }
        }
        http.send(post);
    }
}

＆＃13;

我不熟悉Javascript / AJAX。效果本身并不重要。它应该是闪烁的东西，颜色的短暂变化或类似的东西。

感谢您的帮助基督教

Answer 1

也许这可以提供帮助：Animate.css

用法：

document.getElementById("box").classList.add('bounce animated')

您需要添加一个侦听器来捕捉动画结束事件：

var onDone = (function(){
    var elm = document.getElementById('box');
    var animateEndName = function () {
        var i,
        el = document.createElement('div'),
        mapping = {
                'animation': 'animationend',
                'OAnimation': 'oanimationend', 
                'MozAnimation': 'animationend',
                'WebkitAnimation': 'webkitAnimationEnd'
        }

        for (i in mapping) {
            if (el.style[i] !== undefined) {
                return mapping[i];
            }
        }
    }();

    elm.addEventListener(animateEndName, function(){
        elm.classList.remove('flash', 'animated');
    });

    return function(result){
        elm.innerHTML = result;
        elm.classList.add('flash', 'animated');
    }
})();

AJAX内容更改加上小变化效果

1 个答案: