在新闻提要上重复淡入

Question

A page of my website has a news feed where I use AJAX to return each day one at a time and display it. I want each days news to appear with a fade in.

The problem is the fade in repeats, for each day that I return

Html

<div id='newsdiv' class='newsDiv'></div>

Javascript AJAX call

document.getElementById('newsdiv').innerHTML += xmlhttp.responseText; 

CSS

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* Opera < 12.1 */ 
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.divFadeIn, .centreScreen, .tbl_houseForm {
    -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 3s; /* Firefox < 16 */
        -ms-animation: fadein 3s; /* Internet Explorer */
         -o-animation: fadein 3s; /* Opera < 12.1 */
            animation: fadein 3s;

    -webkit-animation-iteration-count: 1;
       -moz-animation-iteration-count: 1;
        -ms-animation-iteration-count: 1;
         -o-animation-iteration-count: 1;
            animation-iteration-count: 1;

-webkit-animation-fill-mode: forwards;
   -moz-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
     -o-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
 }

If I put the fade in the parent to the new feed, then it'll fade in when the first day is returned, but not for any of the following days.

If I put the fade in on a child div, then it'll fade in when each and every day is returned (i.e. repeating the fade in when the next day is returned).

How do I stop this from happening? How do I stop each day from fading in more than once?

I do understand that each day is only fading in because the div "divNews" is being re-populated. But this understanding doesn't solve my problem.

Answer 1

You should append a new element in your parent div instead of updating the whole content.

You can return json with your ajax call and create the new element on the fly with the returned data on the callback function.

A simple example using jquery :

$.get('your_url',function(data){

  var el = $('<div></div>').addClass('animation_class').html(data.key);
  $('#newsdiv').append(el);

});