초기 페이지로드시 애니메이션 (동위 원소)?

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); 

당신은 어떻게 페이지로드에 애니메이션을 실행합니까? 고마워!

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">