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

尝试移动$（＆＃39;＃tempWrapper＆＃39;）。remove（）;从onStart到onBefore或onAfter。我有同样的问题，这对我有用。

Smoothstate.js同时显示新旧页面

1 个答案: