在新闻源上重复淡入淡出答案

【问题标题】：Repeating fadein on news feed在新闻源上重复淡入淡出
【发布时间】：2015-07-08 22:43:33
【问题描述】：

我网站的一个页面有一个新闻提要，我使用 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 上，那么它会在每天返回时淡入（即在第二天返回时重复淡入）。

如何阻止这种情况发生？如何避免每天多次消失？

我明白每一天都只是淡出，因为 div“divNews”正在被重新填充。但是这种理解并不能解决我的问题。

【问题讨论】：

标签： javascript html css ajax animation

【解决方案1】：

我自己解决了。

我确保淡入是由一个没有做任何其他事情的 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;

【讨论】：

【解决方案2】：

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

您可以使用 ajax 调用返回 json，并使用回调函数返回的数据动态创建新元素。

使用 jquery 的简单示例：

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

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

});

【讨论】：