javascript - 让 smoothState.js 和 Foundation 6 协同工作

Question

我正在开发一个 Foundation 6 项目，并试图使其与 smoothState.js 一起工作。

我设法让 smoothState 本身正常工作，但现在 Foundation 似乎已损坏。具体来说，当您首次加载页面或单击重新加载按钮时，页面会正确加载，但单击链接进行导航似乎会破坏布局。我的猜测是，这是因为 $(document).foundation(); 仅在页面加载时运行。

我曾尝试遵循针对 js 插件的更一般建议，例如 Reinitializing page scripts after SmoothState.Js page change ，我尝试了 https://gist.github.com/miguel-perez/476046a42d229251fec3 ，但都没有解决我的问题。 $(document).foundation('reflow'); 也不起作用。我被困住了!

感觉好像我错过了一些东西，因为我是一个 js 新手。

无论如何，这就是我正在处理的内容:

$(document).foundation();

$(function() {
  'use strict';
  var $page = $('#main'),
    options = {
      debug: true,
      prefetch: true,
      cacheLength: 2,
      onStart: {
        duration: 0, // Duration of our animation, was 250
        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);
        }
      },
      onAfter: function($container) {
        $container.removeClass('is-exiting');
        console.log('after');
        $(document).foundation();
      },
    },
    smoothState = $page.smoothState(options).data('smoothState');
});

感谢任何帮助!我将其交叉发布到 smoothState.js 的 GitHub 页面上的“问题”下。

谢谢!

编辑

好的，所以我尝试了基金会文档中的一堆片段，并且我得到了一半有效的东西。

下面的 smoothState.js 重新加载 Foundation 并修复布局，但有问题的插件 Foundation 的 Sticky 不会重置(即不会变得粘性)。尽管在控制台中输入 $('.sticky').foundation('_calc', true); 可以 100% 修复插件，但将同一行添加到 smoothState.js 只能解决一半的问题。也没有错误。

如此接近却又如此遥远!我缺少什么？ :)

// @codekit-prepend "jquery.smoothState.min.js";

$(document).foundation();

$(function () {
    'use strict';
    var $page = $('#main'),
        options = {
            debug: true,
            prefetch: true,
            cacheLength: 4,
            onStart: {
                duration: 0, // Duration of our animation, was 250
                render: function ($container) {
                    // Add your CSS animation reversing class
                    $container.addClass('is-exiting');
                    // Restart your animation
                    smoothState.restartCSSAnimations();
                    // alert('end of start');
                }
            },
            onReady: {
                duration: 0,
                render: function ($container, $newContent) {
                    $container.html($newContent);
                    // alert('end of ready');
                    // console.log('Ready');
                }
            },
            onAfter: function ($container) {

                $container.removeClass('is-exiting');
                $(document).foundation();
                $('.sticky').foundation('_calc', true);
                // $('.sticky').foundation('_calc', true);
                // alert('end of onAfter');
                // console.log('onAfter');
            },
        },
        smoothState = $page.smoothState(options).data('smoothState');
}); 

最后编辑

添加 $(window).trigger('load'); suggested as a workaround here,似乎有效。不禁想知道是否有更好的解决方案？

Answer 1

几天前，我在自己寻找答案时偶然发现了你的问题。我让它在我当前的网站上运行，并且由于您的问题是在三月份发布的，希望您已经找到了答案。

以防万一您还没有找到它，这是我的答案。

您可以在 smoothstate 的“onAfter”函数中初始化基础。

//PAGE TRANSITIONS WITH SMOOTHSTATE
$(function(){
'use strict';
var $page = $('#main'),
  options = {
    debug: true,
    blacklist : $('.photogallery a'),
    prefetch: true,
    cacheLength: 2,
    onStart: {
      duration: 250, // 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);
        // $container.onPageLoad();
      }
    },
    onAfter: function($container) {
        $(document).foundation();
// This is where you initialize foundation
        $container.onPageLoad(); // all other scripts inside this function          
    }
  },
  smoothState = $page.smoothState(options).data('smoothState');  

});