Question

我想在页面加载时设置动画，例如this example（点击观看）。使用同位素插件

var $container = $('.masonry-container').isotope({
  itemSelector: '.masonry',
  masonry: {
    percentPosition: true,
    columnWidth: '.masonry'
  },
  transitionDuration: '2.4s'
});
// reveal all items after init
var iso = $container.data('isotope');
$container.isotope( 'reveal', iso.items );

如何在页面加载时运行动画？ THX！

Answer 1

完成！使用wow.js + animate.css 代码

setTimeout(function() {

var $grid = $('.masonry-container').imagesLoaded( function() {

  $grid.isotope({
    itemSelector: '.masonry',
        percentPosition: true,
        columnWidth: '.masonry'
  });
});

    $(".hide-masonry").show();

},3000);

new WOW().init();

将类添加到动态加载的块：<div class="col-xs-12 col-sm-4 col-md-2 masonry nopadding wow zoomIn animated" wow-data-duration="<?echo $i;?>s" data-wow-delay="<?echo $i;?>00ms">

初始页面加载动画（同位素）？

1 个答案: