smoothState.jsとFoundation 6を連携させる

Question

私はFoundation 6プロジェクトに取り組んでおり、smoothState.jsで動作させようとしています。

私はsmoothState自体を動作させることができましたが、今はFoundationが壊れているようです。具体的には、ページを最初にロードするかリロードボタンをクリックすると正しく読み込まれますが、リンクをクリックすると移動してレイアウトが破損します。私の推測では、$(document).foundation();はページが読み込まれたときにのみ実行されるからです。

私はReinitializing page scripts after SmoothState.Js page changeのような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ページにクロス投稿しました。

ありがとうございます！

EDITは

は[OK]をので、私は財団の資料から抜粋の束を試みたが、私は半分の作品何かを持っています。

下記のsmoothState.jsは、Foundationを再読み込みしてレイアウトを修正しますが、問題のプラグイン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'); 
}); 

LAST EDIT

が$(window).trigger('load');suggested as a workaround here,を追加すると、動作しているようです。より良い解決策があるのか​​どうか疑問に思っていますか？

Answer 1

私は数日前にあなたの質問に遭遇しましたが、自分で回答を探していました。私はそれを私の現在のサイトで動作させ、3月にあなたの質問が投稿されたので、うまくいけばあなたはすでに答えを見つけました。

もしあなたがそれを見つけられなかった場合は、私の答えです。

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

});