Smoothstate.jsは新しいページと古いページに同時に表示されます

Question

これはここに提供された回答への参照です：Is it possible to show both the new and old pages simultaneously?。

解決策をファイルに追加しましたが、tempWrapperはonStartで削除されていないため、重複するコンテンツが表示されています。私はそれが私が選択している要素で何かだと信じていますが、どんな援助も感謝しています！

HTML構造

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

ここでは私の完全な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

は$（ '＃のtempWrapper'）を移動してみてくださいされる（削除）。 onStartからonBeforeまたはonAfterのいずれかに切り替えます。 私は同じ問題を抱えていて、それが私のために働いたのです。