使平滑状态动画和砌体一起工作

Making smoothState animations and Masonry work together

本文关键字：一起 工作 平滑 状态 动画      更新时间：2023-09-26

我正在尝试使用砌体和smoothState在页面之间使用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似乎不起作用)。如果我去掉砌体代码，smoothState就可以正常工作，这看起来很奇怪，因为它们应该是不相关的。

有办法两者兼得吗?

根据FAQ, $(document).ready函数必须在onAfter中重新初始化。在查看了问题部分和这里的许多文章之后，开发人员在这里创建了一个要点，可以重新运行任何$(document).ready函数。

我仍然不能得到它的工作虽然(我不使用砖石，但使用imagesLoaded从desandro和其他一些插件)，似乎$.readyFn.execute();应该运行的选项。回调，但是faq说在回调后运行。我都试过了，它不适合我，我也试过删除所有其他插件，只是做一些琐碎的任务准备，但没有工作，似乎对我来说只是不火。

所以即使这对我不起作用，根据其他帖子，这应该为你解决它。

在包含jQuery

之后粘贴以下内容
;(function($){
    var  $doc = $(document);
    /** create mod exec controller */
    $.readyFn = {
        list: [],
        register: function(fn) {
            $.readyFn.list.push(fn);
        },
        execute: function() {
            for (var i = 0; i < $.readyFn.list.length; i++) {
                try {
                   $.readyFn.list[i].apply(document, [$]);
                }
                catch (e) {
                    throw e;
                }
            };
        }
    };
    /** run all functions */
    $doc.ready(function(){
        $.readyFn.execute();
    });
    /** register function */
    $.fn.ready = function(fn) {
        $.readyFn.register(fn);
    };
})(jQuery);

然后添加以下内容，确保原始砌体调用在$(document).ready函数中

$(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);
          }
        },
        // over a year ago, this was simply callback: function(){}
        onAfter: function($container, $newContent){
          $.readyFn.execute();
        }
      },
      smoothState = $page.smoothState(options).data('smoothState');
});
相关文章：