Question

我正在使用Foundation 6项目，并尝试使用smoothState.js。

我设法让smoothState本身工作，但现在基金会似乎被破坏了。具体来说，首次加载页面或单击“重新加载”按钮时页面会正确加载，但单击导航链接会出现打破布局。我的猜测是因为$(document).foundation();仅在页面加载时运行。

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

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

无论如何，这是我与之合作的事情：

$(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＆＃t; 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

几天前，当我自己寻找答案时，我偶然发现了你的问题。我在我当前的网站上工作，因为你的问题是在3月发布的，希望你已经找到了答案。

万一你还没找到，我的答案就在这里。

你可以在光滑状态＆＃34; onAfter＆＃34;中初始化基础。功能。

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

});

让smoothState.js和Foundation 6一起工作

1 个答案: