jQuery同位素過濾器完成后觸發警報

Question

我有jquery同位素設置，並創建了一些過濾器。 當我創建一個濾鏡時，同位素會表現出很好的動畫效果。 我想在動畫結束時觸發警報。

本示例演示了發生的動畫：

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

有任何想法嗎？

這是單擊過濾器的代碼：

$('.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

從v1.5（ changelog ）開始，Isotope提供了一個回調來做到這一點； 它在Isotope的簡介中進行了描述（只需在頁面上搜索callback ）：

另外，您可以在options對象之后指定一個回調。 動畫完成后將觸發此功能。

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

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

對於實時示例，請看一下jsFiddle ，當通過復選框輸入或窺視同位素的Callback Test源並搜索changeBGColor更改過濾器時，它會發出警報。

Answer 2

他們都沒有為我工作。 相反，我使用事件部分中解釋的內容： 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

使用Isotope 2.0，這對我不起作用。 我也不使用jQuery，所以香草JS的用法可能有所不同。

無論哪種方式，如果有人遇到這個問題，我都可以使用2.0的事件回調來運行它： iso.on('layoutComplete', myFunction) 。

有關同位素事件的更多信息： http : //isotope.metafizzy.co/events.html

Answer 4

這些都不對我有用。 我不確定它是否是Isotope和/或jQuery 2.1.1的最新版本。 無論如何，我在github上找到了一個解決方案：

$ isotope.bind（“ transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd”，myFunction）;