jquery - 为通过 ajax 加载的元素添加淡入淡出过渡

Question

我正在加载包含来自与我单击的类别对应的一些 json 文件的信息的元素。

下面是一些简化的代码:

var $grid = $('.grid'),
	  $cat_link = $('.cat-list a');

// on loading the page for the first time, I define the category to display as the first one
$cat = 'cat-1';

function getCardsList() {
	$.ajax({
		url: 'js/' + $cat + '.json',
		dataType: 'json'
	}).done(listSuccess);

	function listSuccess(data) {
    var $card_items = [];
		
		for (var i = 0; i < data.length; i++) {
			var	card_item = '<div class="col">' + /*stuff from the json file*/ + '</div>';				
			$card_items.push( card_item[0] );
		}

		$grid.append( $card_items ).addClass('is-loaded');
	}
}

// execute immediately the function on the first load
getCardsList();

$cat_link.on( 'click', function(e) {
	e.preventDefault();

	$cat = $(this).data('cat');

	getCardsList();
});

.col {
  float:left;
  width:25%;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.is-loaded .col {
  transform: scale(1);
  opacity: 1;
}

<ul class="cat-list">
	<li><a href="" data-cat="cat-1">Category 1</a></li>
	<li><a href="" data-cat="cat-2">Category 2</a></li>
	<li><a href="" data-cat="cat-3">Category 3</a></li>
</ul>

<div class="grid"></div>

现在我想向附加到网格的 div 添加过渡。我尝试通过 CSS 隐藏元素，然后将 .is-loaded 类添加到网格以在成功函数中淡入，但由于它们立即附加到网格，因此过渡不会工作。还尝试将 beforeSend 参数添加到 ajax 调用以预先隐藏元素，但没有成功。

如果我在附加元素后使用基本的 $('.grid .col').show() 或 .fadeIn()，它会起作用，但它不是我想要的动画。也不能使用 .animate()，因为它只是为数值设置动画。

我尝试在调用该函数后的点击事件中添加 .is-loaded 类，但它仍然不起作用。

我觉得自己很愚蠢，但就是不知道该怎么做，尽管它看起来很明显。感谢您的帮助。

编辑:这里是一个link到(未完成的)在线版本。看着我的脚本你会完全笑，我是一个自学成才的 JS 菜鸟。

Answer 1

无需处理其他类即可实现所需内容的方法之一是 css 动画。 CSS 示例:

.col {
    float:left;
    width:25%;
    animation: popIn .2s;
}
@keyframes popIn {
    from {transform: scale(0.85); opacity: 0;}
    to {transform: scale(1); opacity: 1;}
}

在这里阅读更多:https://www.w3schools.com/css/css3_animations.asp

另一种方式，有点老套，但可以让您坚持使用类和转换:

首先，修改你的 css 如下所示:

.col {
  float:left;
  width:25%;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.2s, opacity 0.2s;
}
.col.is-loaded {
  transform: scale(1);
  opacity: 1;
}

然后通过在追加元素和向其添加类之间添加延迟来修改您的追加。这是进行转换所必需的。

$("<div class='col'>One</div>").appendTo('.container').delay(1).queue(function (next) { 
    $(this).addClass('is-loaded'); 
    next(); 
  });