Getting smoothState.js und Foundation 6 zusammenarbeiten

Question

Ich arbeite an einem Foundation 6-Projekt und versuche, es mit smoothState.js arbeiten zu lassen.

Ich schaffte es, smoothState selbst zu arbeiten, aber jetzt scheint Foundation gebrochen zu sein. Insbesondere wird die Seite korrekt geladen, wenn Sie sie zum ersten Mal laden oder auf die Schaltfläche zum erneuten Laden klicken. Wenn Sie jedoch auf Verknüpfungen zum Navigieren klicken, wird das Layout möglicherweise beschädigt. Meine Vermutung ist, dass es ist, weil $(document).foundation(); nur ausgeführt wird, wenn die Seite geladen wird.

Ich hatte versucht, allgemeineren Rat für js Plugins wie, Reinitializing page scripts after SmoothState.Js page change folgen, und ich versuchte https://gist.github.com/miguel-perez/476046a42d229251fec3, aber weder gelöst mein Problem. $(document).foundation('reflow'); funktioniert auch nicht. Ich stecke fest!

Es fühlt sich an, als würde ich etwas vermissen, da ich ein Neophyt bin.

Wie auch immer, hier ist das, was mit ich arbeite:

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

Jede Hilfe ist willkommen! Ich habe dies auf der gitHub-Seite von smoothState.js unter Probleme gepostet.

Danke!

EDIT

Ok, also habe ich versucht, ein paar Auszüge aus der Dokumentation Foundation, und ich habe etwas, das halb funktioniert.

Die smoothState.js unten lädt Foundation neu und behebt das Layout, aber das betreffende Plugin, Foundation's Sticky, wird nicht zurückgesetzt (d. H. Wird nicht sticky). Obwohl die Eingabe von $('.sticky').foundation('_calc', true); in der Konsole das Plug-in zu 100% behebt, wird das Problem nur zur Hälfte durch Hinzufügen der gleichen Zeile zu smoothState.js behoben. Auch keine Fehler.

So nah und doch so weit! Was vermisse ich? :)

// @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

Hinzufügen $(window).trigger('load');suggested as a workaround here, scheint zu funktionieren. Kann nicht helfen, aber frage mich, ob es eine bessere Lösung gibt?

Answer 1

Ich bin vor ein paar Tagen auf Ihre Frage gestoßen, als ich selbst nach Antworten gesucht habe. Ich habe es auf meiner jetzigen Seite zum Laufen gebracht und da deine Frage im März veröffentlicht wurde, hast du hoffentlich schon die Antwort gefunden.

Nur für den Fall, dass Sie es nicht gefunden haben, hier ist meine Antwort.

Sie können Foundation in der "onAfter" -Funktion des glowstate initialisieren.

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

});