1

我已经在我的 Wordpress 循环中集成了一个 CSS 过渡效果（我也使用了 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; }
}

这是我的砌体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>
4

1 回答 1

1

我禁用了砌体效果，现在一切正常。如果有人遇到此错误，请随时分享解决方案。

于 2014-05-08T10:25:50.883 回答