Question

我正在加载包含与我点击的类别对应的某些json文件中的信息的项目。

下面是一些简化的代码：

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

如果我在追加项目后使用基本 $（＆＃39; .grid .col＆＃39;）。show（）或 .fadeIn（），它有效，但它不是我想要的动画。无法使用 .animate（），因为它只能为数值设置动画。

我尝试在调用函数后在click事件中添加 .is-loaded 类但它仍然无法正常工作。

我觉得非常愚蠢，但我不知道如何做到这一点，即使它看起来很明显。谢谢你的帮助。

编辑：这是（未完成）在线版本的link。你会笑着看我的剧本，我是一个自学成才的JS noob。

Answer 1

以下是使用优秀ajax success event作为参考的JSONPlaceholder API的简单示例。

＆＃13;

var root = 'https://jsonplaceholder.typicode.com';
getCardsList();

function getCardsList() {
  $.ajax({
    url: root + '/posts/1',
    method: 'GET',
    success: function(results) //using the success event
    {
      //fade in results (contains bold tags and an extra line break
      $('.container').append("<b>" + results.title + "</b><br/><br/>").fadeIn("slow");
      $('.container').append(results.body).fadeIn("slow");
    }
  });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container" hidden="hidden"></div>

＆＃13;

Answer 2

实现你想要的方法之一，而不必处理额外的类是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

另一种方式，这有点hacky，但让你坚持上课和过渡：

首先，修改你的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(); 
  });

为通过ajax加载的项添加淡入过渡

2 个答案: