Smoothstate.js zeigen gleichzeitig neue und alte Seiten

Question

Dies ist ein Verweis auf die Antwort hier: Is it possible to show both the new and old pages simultaneously?. Ich versuche, den alten Inhalt anzuzeigen, während der neue Inhalt eingeblendet wird.

Ich habe die Lösung meinen Dateien hinzugefügt, aber der TempWrapper wird nicht auf Start entfernt, was zu überlappenden Inhalten führt. Ich glaube, es ist etwas mit den Elementen, die ich auswähle, aber jede Hilfe wird geschätzt!

HTML-Struktur

<div class="scene" id="main"> 
    <!-- Navigation links here --> 
    <div id="content" <?php body_class(); ?>> 
     <div id="inner-content" class="row"> 
      <main class="large-12 medium-12 columns" role="main"> 
       <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
        <?php get_template_part('parts/loop', 'page'); ?> 
       <?php endwhile; endif; ?> 
      </main> <!-- end #main --> 
     </div> <!-- end #inner-content --> 
    </div> <!-- end #content --> 
</div> 

Hier ist meine komplette JS

$(function(){ 
    'use strict'; 
    var options = { 
      prefetch: true, 
      cacheLength: 10, 
      onStart: { 
       duration: 1000, 
       render: function ($container) { 
        $('#tempWrapper').remove(); // If we have the temp wrapper, kill it now. 
        $("html, body").animate({ scrollTop: "0px" }); 

        // Make a duplicate container for animation 
        var $newContainer = $container.clone(); 
        $newContainer.attr("id", "tempWrapper"); 
        $newContainer.css({position:'absolute', top:$container.offset().top, width:$container.css("width")}); 
        $container.css({height:$container.css("height")}); 
        $container.empty(); // Empty the old content so that it takes up 0 space 
        $container.before($newContainer); // Immediately add the duplicate back on 
        $('#inner-content').removeClass('scene_element--fadeinright'); // Just in case we have the class still 
        var element = $('#inner-content', $newContainer); 
        setTimeout(callAnimation(element, true), 0); // Start the animation 
       } 
      }, 
      onReady: { 
       duration: 0, 
       render: function ($container, $newContent) { 
        // Inject the new content 
        $container.html($newContent); 

        // do animations 
        var element = document.getElementById($container[0].id).getElementsByClassName('scene_element')[0]; 
        callAnimation(element); 
       } 
      }, 
      onAfter: function ($container) {} 
     }, 
     smoothState = $('#main').smoothState(options).data('smoothState'); 
}); 

function callAnimation(element, exiting) { 
    if (!exiting) { 
     $(element).addClass("scene_element--fadeinright"); 
    } else { 
     $(element).addClass('is-exiting'); 
    } 
} 

Answer 1

Versuchen Sie, die $ ('# tempWrapper') bewegt entfernen(). von onStart entweder onBefore oder onAfter. Ich hatte das gleiche Problem und das hat bei mir funktioniert.