Question

我尝试在页面之间使用SmoothState动画一起使用Masonry和smoothState。

以下代码使smoothState动画可以向前和向后工作：

$(function(){
  'use strict';
  var $page = $('#main'),
      options = {
        debug: true,
        prefetch: true,
        cacheLength: 2,
        onStart: {
          duration: 500, // Duration of our animation
          render: function ($container) {
            // Add your CSS animation reversing class
            $container.addClass('is-exiting');
            // Restart your animation
            smoothState.restartCSSAnimations();
          }
        },
        onReady: {
          duration: 0,
          render: function ($container, $newContent) {
            // Remove your CSS animation reversing class
            $container.removeClass('is-exiting');
            // Inject the new content
            $container.html($newContent);
          }
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});

我可以通过调用

来使砌体工作

$(document).ready(function() {
    var $container = $('#portfolio');
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector : '.p-item',
      });    
    });
});

但是他们不能很好地在一起玩。砌体有效，但smoothState没有（前向动画仍然很好，因为它们是纯CSS，但JS似乎不起作用）。如果我摆脱了Masonry代码，smoothState工作正常，这看起来很奇怪，因为它们应该是无关的。

有两种方法可以同时使用吗？

使smoothState动画和Masonry一起工作

0 个答案: