让smoothState.js和Foundation6协同工作

Question

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

我设法让smoothState本身发挥作用，但现在基金会似乎破产了。具体来说，当您第一次加载页面或单击"重新加载"按钮时，页面会正确加载，但单击链接进行导航会破坏布局。我的猜测是因为$(document).foundation();只在页面加载时运行。

我试着遵循关于js插件的更一般的建议，比如在SmoothState.js页面更改后重新初始化页面脚本，我试着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页面的Issues下交叉发布了这篇文章。

谢谢！

编辑

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

下面的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');作为一种变通方法似乎有效。不禁想知道是否有更好的解决方案？

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');  
});