javascript - 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() 代码，然后使用 firebug 或其他开发工具删除类。它工作正常).

有谁知道如何解决这个问题并获取它，以便应用 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')
        });
    });

});