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

});