Это можно решить с помощью небольшого количества JS и некоторых CSS.
Изменение
comments.InnerHtml += "<li>" + dr.GetString(0) + "</li>";
в
comments.InnerHtml += "<li class=\"hide\">" + dr.GetString(0) + "</li>";
вместе с:
$(document).ready(function() {
$.ajax({
url: 'WebForm1.aspx',
success: function (data) {
$('#comments').html(data);
updateC();
}
});
});
function updateC(){
var d = document.getElementsByClassName('hide');
if(d.length > 1){
for(var i = 0; i < d.length; i++){
d[i].setAttribute('class','');
}
}
}
Затем добавьте style
тег со следующими внутри:
.hide{
height:0px;
overflow:hidden;
-webkit-animation: slide 0.5s forwards; /*'0.5s' is the animation time*/
-webkit-animation-delay: 0.5s; /*Delay before the animation*/
animation: slide 0.5s forwards; /*'0.5s' is the animation time*/
animation-delay: 0.5s; /*Delay before the animation*/
}
@-webkit-keyframes slide{
100% { height: 20px; } /*Set 20px to the line-height*/
}
@keyframes slide{
100% { height: 20px; } /*Set 20px to the line-height*/
}
Конечно, вы можете изменить CSS в зависимости от del ays, настройки времени и высоты, но это эшафот, который отлично работает.
Теги HTML 'li' не будут классифицироваться как таковые, пока класс' hide' не будет удален. Если вам не нужны точки в стороне от отображаемого списка, вам не потребуется удалить класс 'hide', а редактирование JS (исключая' class = \ "hide \" 'change) может быть отброшены и будут функционировать по назначению. – Lugia101101