Smoothstate.js同时显示新旧页面

Question

这是对此处提供的答案的引用：Is it possible to show both the new and old pages simultaneously?。当新内容滑入时，我正在尝试显示旧内容。

我将解决方案添加到我的文件中，但是onStart没有删除tempWrapper，这会导致内容重叠。我相信这是与我选择的元素有关的东西，但任何帮助都是非常感谢的！

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').remove()；从onStart移动到onBefore或onAfter。我也有同样的问题，这就是对我有效的方法。