让smoothState.js和基金会6一起工作

Question

我正在做一个基金会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');
});

任何帮助都是非常感谢的！我在SmothState.js的GitHub页面上交叉发布了这个问题。

谢谢!

编辑

好的，所以我尝试了一堆来自基金会文档的片段，而且我有一些可以工作一半的东西。

下面的smoothState.js重新加载了基金会并修复了布局，但是有问题的插件Foundation没有重置(即不会变粘)。尽管在控制台中输入$('.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

几天前我在自己寻找答案的时候偶然发现了你的问题。我让它在我目前的网站上工作，自从你的问题在三月发布以来，希望你已经找到答案了。

万一你还没找到，这是我的答案。

您可以在平滑状态的"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');  

});