新闻动态中的重复淡入效果

Question

我的网站页面有一个新闻动态，我使用AJAX每天返回一条并显示它。我希望每天的新闻都能以淡入的方式出现。

问题在于，每次返回一天的新闻时都会重复出现淡入效果。

HTML

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

Javascript AJAX调用

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

如果我把渐变效果放在父元素到新的信息源上，那么它会在第一天返回时淡入，但对于后面的每一天都不会有渐变效果。

如果我把渐变效果放在子div中，那么每返回一个新的信息源都会重新淡入（即在下一天返回时重复渐变效果）。

如何防止这种情况发生？如何防止每天淡入超过一次？

我确实理解每天淡入的原因是因为“divNews”被重新填充。但这样的理解并不能解决我的问题。

- Matthew

Answer 1

你应该在父级 div 中添加一个新元素，而不是更新整个内容。

你可以通过 ajax 调用返回 json，并在回调函数中使用返回的数据动态创建新元素。

以下是使用 jquery 的简单示例：

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

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

});

- Bubble Initiative

Answer 2

我自己解决了。

我确保淡入是由一个什么都不做的 div 完成的，然后在添加以下几天的新闻之前，我从 div 中删除了类名。

var sTempNewsFeed = document.getElementById('newsdiv').innerHTML;

sTempNewsFeed = sTempNewsFeed.replace('class=\'divFadeIn\'', '');
sTempNewsFeed = sTempNewsFeed.replace('class=\"divFadeIn\"', '');
sTempNewsFeed += xmlhttp.responseText;
document.getElementById('newsdiv').innerHTML = sTempNewsFeed; 

- Matthew