disparar alerta após a conclusão do filtro de isótopo jquery

Question

Eu tenho a configuração do isótopo jquery e criei alguns filtros.Quando eu crio, seleciono um filtro, o isótopo faz uma pequena animação.Quero acionar um alerta no final da animação.

Este exemplo demonstra a animação que ocorre:

http://isotope.metafizzy.co/demos/filtering.html

Alguma ideia?

Aqui está o código para clicar em um filtro:

$('.filter').on( 'click', 'a', function( event ) {
        event.preventDefault();
        var $this = $(this);
        // don't proceed if already selected
        if ( $this.hasClass('selected') ) {
            return false;
        }

        // console.log('hello world');
        var $optionSet = $this.parents('.option-set');
        var group = $optionSet.attr('data-filter-group');
        options.comboFilters[ group ] = $this.attr('data-filter-value');
        $.bbq.pushState( options );

        // COUNT
        var $filtered = $('#isotope-container').data('isotope').$filteredAtoms;
        // get count of all filtered item
        alert($filtered.length);
        // get count of all filtered items that match a selector
        //$filtered.filter('.blue').length;
  });

Answer 1

Desde v1.5 (registro de alterações), Isotope fornece um retorno de chamada para fazer exatamente isso;está descrito em Introdução ao Isótopo (basta pesquisar na página por callback):

Além disso, você pode especificar um retorno de chamada após o objeto de opções.Esta função será acionada após a conclusão da animação.

onAnimationFinished = function(){
  // code to be executed after the animation finishes
};

$('#container').isotope({ filter: '.my-selector' }, onAnimationFinished);

Para exemplos ao vivo, dê uma olhada em este jsFiddle que lança um alerta ao alterar um filtro através das entradas da caixa de seleção ou peep Teste de retorno de chamada do isótopo fonte e procure changeBGColor.

Answer 2

Nenhum deles funcionou para mim.Em vez disso, usei o que é explicado nas seções de eventos: http://isotope.metafizzy.co/events.html

function onLayout() {
        // What to do when layout fully rendered
    }
    // bind event listener
    $isotope.isotope( 'on', 'layoutComplete', onLayout ); 

Answer 3

Isso não funcionou para mim usando o Isotope 2.0.Também não estou usando jQuery, então talvez o uso seja diferente com o Vanilla JS.

De qualquer forma, se alguém tiver esse problema, consegui fazê-lo funcionar usando o retorno de chamada de evento do 2.0: iso.on('layoutComplete', myFunction).

Mais informações sobre eventos de isótopos: http://isotope.metafizzy.co/events.html

Answer 4

Nada disso funcionou para mim.Não tenho certeza se é a versão mais recente do Isotope e/ou jQuery 2.1.1.Independentemente disso, encontrei uma solução em GitHub:

$isotope.bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", minhaFunção);