我的网站页面有一个新闻动态,我使用AJAX每天返回一条并显示它。我希望每天的新闻都能以淡入的方式出现。
问题在于,每次返回一天的新闻时都会重复出现淡入效果。
HTML
如果我把渐变效果放在父元素到新的信息源上,那么它会在第一天返回时淡入,但对于后面的每一天都不会有渐变效果。
如果我把渐变效果放在子div中,那么每返回一个新的信息源都会重新淡入(即在下一天返回时重复渐变效果)。
如何防止这种情况发生?如何防止每天淡入超过一次?
我确实理解每天淡入的原因是因为“divNews”被重新填充。但这样的理解并不能解决我的问题。
问题在于,每次返回一天的新闻时都会重复出现淡入效果。
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”被重新填充。但这样的理解并不能解决我的问题。