Step fade Infinite Scroll appending of items

I'm using Isotope's Masonry layout alongside Infinite Scroll, which is initiated by clicking a button.

I want to animate/transition each .article item into place, however I am only able to achieve this via CSS on the initial layout. Is there a way of creating this 'step fade' effect each time the infinite scroll function is run?

Many thanks.

HTML

<div class="articles">
    <div class="article">
    </div>
</div>

JQUERY

$('.articles').imagesLoaded(function () {
    // vars
    // Define grid
    var $grid = $('.articles');

    $grid.isotope({
        itemSelector: '.article',
        layoutMode: 'masonry',
        transitionDuration: 0,
        stagger: 500,
        hiddenStyle: { opacity: 0 },
        visibleStyle: { opacity: 1 }
    });

    var iso = $grid.data('isotope');

    // Init infinite scroll
    $grid.infiniteScroll({
        path: '.pagination .next a',
        append: '.article',
        outlayer: iso,
        loadOnScroll: false,
        scrollThreshold: false,
        button: '.load-more-button',
        hideNav: '.pagination',
        status: '.load-status',
    });         
});

from Step fade Infinite Scroll appending of items