Smoothstate.js同时显示到新页面和旧页面 [英] Smoothstate.js simultaneously show to new and old pages

问题描述

这是对此处提供的答案的引用:

This is a reference to the answer provided here: Is it possible to show both the new and old pages simultaneously?. I am attempting to display the old content while the new content slides in.

我将解决方案添加到了文件中，但是tempWrapper并未在onStart上删除，这导致内容重叠.我相信这与我选择的元素有关，但我们会提供任何帮助！

I added the solution to my files but the tempWrapper isn't being removed onStart, which is causing overlapping content. I believe it's something with the elements I am selecting but any assistance is appreciated!

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

推荐答案

尝试移动$('#tempWrapper').remove();从onStart到onBefore或onAfter. 我遇到了同样的问题，那对我有用.

Try moving the $('#tempWrapper').remove(); from onStart to either onBefore or onAfter. I had the same issue and that's what worked for me.

这篇关于Smoothstate.js同时显示到新页面和旧页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！