我正在使用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
最佳答案
您需要使用docs中指定的“黑名单”选项：
一个jQuery选择器，它指定应忽略smoothState元素中的哪些元素。这包括表单元素和锚元素。
只需将其添加到选项对象blacklist: '.no-smoothState'
然后将.no-smoothState类添加到要忽略的任何页面元素。