Question

我正在使用SmoothState.Js在点击上加载新页面。因为在这些页面的每一个上，徽标都保持在相同的位置/大小，所以我希望徽标不会刷新，也不会在页面更改时淡出。

我的菜单中的链接不会刷新，但徽标确实如此。我没有在文档中看到任何内容，也没有在Google上看到过这样的问题。在这些ajax页面更改之间，我将如何始终保持图像到位？

这是SmoothState调用：

$(function() {
    $('#main').smoothState();
});

$(function() {
    "use strict";
    var options = {
            prefetch: true,
            pageCacheSize: 4,
            onStart: {
                duration: 300, // Duration of our animation 
                render: function($container) {
                    // Add your CSS animation reversing class 

                    $container.addClass("is-exiting");


                    // Restart your animation 
                    smoothState.restartCSSAnimations();
                }
            },
            onReady: {
                duration: 0,
                render: function($container, $newContent) {
                    // Remove your CSS animation reversing class 
                    $container.removeClass("is-exiting");

                    // Inject the new content 
                    $container.html($newContent);


                }

            },

        },
        smoothState = $("#main").smoothState(options).data("smoothState");
});

HTML：

 <header class="header">
        <div class="main-logo">
            <a class="svg" href="www.site.com">
                <object class="willItBlend" data="../svg/main-logo.svg" type="image/svg+xml"></object>
                <img class="blender" src="../svg/main-logo.png" />
            </a>
        </div>
        <nav class="main-nav-about">
            // links go here
        </nav>
</header>

SmoothState的可用事件调用：

onBefore - Runs before a page load has been started
onStart - Runs once a page load has been activated
onProgress - Runs if the page request is still pending and the onStart animations have finished
onReady - Run once the requested content is ready to be injected into the page and the previous animations have finished
onAfter - Runs after the new content has been injected into the page and all animations are complete

Answer 1

您需要使用文档中指定的“黑名单”选项：

jQuery选择器指定应忽略smoothState元素中的哪些元素。这包括表单元素和锚元素。

只需将其添加到选项对象Point position = Mouse.GetPosition(MainWindow); Cursorposition.Text = "X:" + position.X + "Y:" + position.Y;

即可

然后将blacklist: '.no-smoothState'类添加到您想要忽略的任何页面元素。

Answer 2

对我来说，黑名单在这种情况下不起作用。我所做的是保持菜单不变，只替换想要的内容，如下所示。

HTML （ index.html ， about.html 和 work.html 遵循该模式）：

<body>
    <div id="main">
        <div class="menu">
            <a href="index.html">index</a>
            <a href="work.html">work</a>
            <a href="about.html">about</a>
        </div>
        <div id="content">
            <h1>INDEX</h1>
        </div>
    </div>
</body>

<强> JS ：

$(function() {
  $('#main').smoothState({
    'onReady': {
        'render': function($container, $newContent) {

            // replace only content div and leave the menu alone
            $container.find('#content').html($newContent.filter('#content'));
        }
    }
  });
});

请注意，我还没有测试其他一切是否仍然有效，但似乎一切都很好。我是插件本身的新手，并考虑到我的下一个项目。这个解决方案是经过一些测试和实验的结果。

SmoothStateJS：如何在页面更改时保持元素不刷新？

2 个答案: