Question

我正在使用Isotope作为其令人敬畏的布局功能，我有一个通过Ajax检索新项目的调用，这将删除旧项目并预先设置新项目。动画看起来非常光滑，但是我无法回复动画完成动画。

我试图在他们的网站上使用他们的文档：

$grid.on( 'arrangeComplete', onArrange );

我已经用这种方式实现了它：

$grid = $('#grid').isotope({
        itemSelector: '.item'
});

$grid.on('arrangeComplete', function(){
    console.log('arrangeComplete')
});

然而，这对我不起作用。事件永远不会被解雇。

我有两个删除和预先添加新项目的功能：

//Remove
$grid.isotope('remove', removeItems); //removeItems being a var this works fine

//Add
$grid
    .prepend(assets)
    .isotope('appended', assets)
    .isotope('reloadItems')
    .isotope({sortby: 'original-order'});
//again this all works fine

我不确定我是否使用了错误的事件来完成动画，但我遇到的麻烦是它们似乎都没有被解雇。

目前我有一个黑客入侵：

$grid.bind("transitionend", function(){

hack有效，但它在每个元素转换结束时触发它的事件，这意味着取决于页面上将要触发的所有转换要移除的项目数，然后是下一个项目的所有转换被假装。这对我来说显然是一个问题。

非常感谢任何帮助或指示。

Answer 1

在过去，我遇到了reloadItems方法未触发的问题，导致动态添加的项目堆叠在右上角。出于某种原因，以下列方式调用它似乎有效：

$grid.isotope('reloadItems').isotope();

我不知道为什么第二个.isotope（）是必要的 - 也许其他人可以解释。

同位素事件没有发射

1 个答案: