Я интегрировал эффект перехода css в свой цикл Wordpress (я также использовал Masonry, возможно, именно в этом конфликт). Анимация воспроизводится дважды, а не один раз, что раздражает, поскольку я не могу понять, как сделать так, чтобы она воспроизводилась плавно. Я использовал несколько скриптов js и css3 на основе этого руководства: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/
Вот ссылка на страницу с двойной анимацией: http://crippslawtest.co.uk/?post_type=cripps_staff&Department=accounting
<script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/masonry.pkgd.min.js"></script>
<script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/imagesloaded.js"></script>
<script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/classie.js"></script>
<script src="http://crippslawtest.co.uk/wp-content/themes/CrippsTheme/js2/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'lazy' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 1
} );
Вот мой css3:
.masonry-brick {
-webkit-transform: translateY(200px);
-moz-transform: translateY(200px);
transform: translateY(200px);
-webkit-animation: moveUp 0.65s ease forwards;
-moz-animation: moveUp 0.65s ease forwards;
animation: moveUp 0.65s ease forwards;
}
@-webkit-keyframes moveUp {
to { -webkit-transform: translateY(0); opacity: 1; }
}
@-moz-keyframes moveUp {
to { -moz-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp {
to { transform: translateY(0); opacity: 1; }
}
Вот мой Masonry JS:
if ( $.isFunction( $.fn.masonry ) ) {
$( '#people-transition' ).masonry( {
itemSelector: '.people-transition',
columnWidth: function( containerWidth ) {
return containerWidth / 4;
},
gutterWidth: 0,
isResizable: true,
isRTL: $( 'body' ).is( '.rtl' )
} );
}
Это моя область контента:
<div class="col-md-3 spacetop masonry-brick people-transition">
<a href='<?php echo get_permalink($post->ID); ?>'><img class="lazy" class="" src="<?php the_sub_field('image'); ?>"></a>
<h2 class="staffname">
<?php echo get_post_meta($post->ID,'staff_name',true); ?>
</h2>
<h2 class="staffrole">
<?php echo get_post_meta($post->ID,'staff_role',true); ?>
</h2>
<h2 class="staffnumber">
<?php the_sub_field('telephone_number'); ?>
</h2>
<h2 class="staffemail">
<?php the_sub_field('email_address'); ?>
</h2>
</div>