使用 masonryjs 加载页面时的动画

Question

当在第一个页面加载时完全像原始插件的页面一样初始化 masonry 时，我无法弄清楚如何获得初始淡入淡出动画：

http://masonry.desandro.com/

有什么帮助建议吗？

Answer 1

我使用了 imagesLoaded 进度延迟 API 和 Masonry 的附加方法。

$('#load-images').click( function() {
  var $items = getItems();
  // hide by default
  $items.hide();
  // append to container
  $container.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents('.item');
    // un-hide item
    $item.show();
    // masonry does its thing
    $container.masonry( 'appended', $item );
  });
});

项目首先被隐藏，然后附加到容器中。加载每个项目后，它会取消隐藏，然后由 Masonry 显示。

来源：http://codepen.io/desandro/pen/iHevA

使用 masonryjs 加载页面时的动画

Animation on page load with masonryjs

javascript

css

jquery

masonry