Получение smoothState.js и Foundation 6 для совместной работы

Question

Я работаю над проектом Foundation 6 и пытаюсь заставить его работать с smoothState.js.

Мне удалось заставить smoothState работать, но теперь Foundation кажется сломанным. В частности, страница загружается правильно, когда вы впервые загружаете ее или нажимаете кнопку перезагрузки, но щелчок по ссылкам для навигации, похоже, нарушает макет. Я предполагаю, что это потому, что $(document).foundation(); запускается только при загрузке страницы.

Я попытался последовать более общему совету для плагинов js, например, " Повторная инициализация сценариев страницы после изменения страницы SmoothState.Js", и я попытался 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');
});

Любая помощь приветствуется! Я опубликовал это на странице GitHub smoothState.js в разделе "Проблемы".

Спасибо!

РЕДАКТИРОВАТЬ

Итак, я попробовал несколько фрагментов из документации Foundation, и у меня есть кое-что, что работает наполовину.

Файл smoothState.js ниже перезагружает Foundation и исправляет макет, но рассматриваемый плагин, Sticky, 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

Я наткнулся на ваш вопрос несколько дней назад, когда сам искал ответы. Я заставил его работать на моем текущем сайте, и, так как ваш вопрос был опубликован в марте, надеюсь, вы уже нашли ответ.

На всякий случай, если вы не нашли его, вот мой ответ.

Вы можете инициализировать фундамент в функции onSfter сглаживания.

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

});