CSS/AJAX - 通过AJAX调用激活样式

Question

我有一个使用AJAX填充搜索结果字段的搜索功能。我想为每个搜索结果添加样式，并添加一些效果（如“加载动画”）。目前，我有这样的代码：

$.ajax({ 
    type: 'GET', 
    url: '/Search', 
    data: { 
    'search_value': str 
    }, 
    dataType: 'text', 
}) 
.done(function(json) { 
    var Search = JSON.parse(json), searchHTML = '', x; 
    for (x in Search) { 
    $('<span id="item'+x+"' class="search-item" style="display: none;">'+ Search[x] + '</span>').appendTo('#main').show('slow'); 
    } 
}); 

这个作品，但是.show()我发现有点沉重的性能，因此这样想减少多少的性能用来制作动画的每个搜索结果的加载。

我试图建立这样的：

$.ajax({ 
    type: 'GET', 
    url: '/Search', 
    data: { 
    'search_value': str 
    }, 
    dataType: 'text', 
}) 
.done(function(json) { 
    var Search = JSON.parse(json), searchHTML = '', x; 
    for (x in Search) { 
    $('<span id="item'+x+"' class="search-item off" style="display: none;">'+ Search[x] + '</span>').appendTo('#main').removeClass('off'); 
    } 
}); 

然后我对这个CSS是：

.search-item{ 
    max-height: 256px; 
    overflow: hidden; 
    transition: 3s; 
} 
.search-item.off{ 
    max-height: 0px; 
} 

通过这样做，它会立即删除掉，然后使用transition CSS属性使它增长超过3秒（只是一个测试时间 - 它可能会像0.5s什么的）。

唯一的问题是，它只是删除类，但没有过渡效果（如果我删除removeClass()代码，然后使用萤火虫或其他开发工具删除类，它工作正常）。

是否有人知道如何解决此问题并获取它以便transition属性适用，并且结果不会立即显示？

谢谢。

Answer 1

它甚至在元素被添加到DOM之前删除该类，使用某种类型的超时来延迟删除该类，直到元素被插入。
我更喜欢原生setTimeout，但jQuery有queue()和delay()可用于创建相同的效果。

$.ajax({ 
    type : 'GET', 
    url : '/Search', 
    data : { 
    'search_value': str 
    }, 
    dataType : 'json' 
}).done(function(json) { 

    $.each(json, function(key, value) { 
     var span = $('<span />', { 
      id  : 'item' + key, 
      'class' : 'search-item off', 
      style : 'display : none', 
      text : value 
     }).appendTo('#main'); 

     setTimeout(function() { 
      span.removeClass('off') 
     }); 
    }); 

});