AJAX Inhalt ändern plus kleinen Änderungseffekt

Question

Ich versuche, einen AJAX-Code zu ändern, um einen kleinen Änderungseffekt hinzuzufügen, damit Benutzer sehen können, dass etwas auf dem Bildschirm passiert, weil die Änderung des Inhalts verborgen ist und es schwer ist, nur einige Zahlen zu bemerken

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); 
 
    } 
 
}

haben

geändert

ich bin nicht mit Javascript/AJAX vertraut. Die Art der Wirkung ist nicht wichtig. es sollte etwas blinken, kurzer Farbwechsel oder ähnliches sein.

Danke für Ihre Hilfe Christian

Answer 1

Vielleicht kann dies helfen: Animate.css

Nutzung:

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

Sie benötigen einen Listener hinzufügen Animation Ende Ereignis zu fangen:

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'); 
    } 
})();