smoothState.js -标识引用页面

Question

当单击链接平滑状态加载新页面的内容时，我希望使用新页面上可见的类来标识引用页面。有没有办法做到这一点？

Answer 1

这不是最动态的解决方案，但我最终所做的是将类设置为引用页面上的锚标记。SmoothState具有onBefore()回调，该回调传递$currentTarget，即您单击以启动转换的锚元素。您可以很容易地读取锚点元素上的href，并检测出您想要这样做的内容(或者将其存储在某个地方，直到以后)。

因此，在我的HTML中，我可以像这样声明一个链接：

<a href="new_page.html" class="special_case">New Page</a>

然后，当我设置smoothState时，我声明我的onBefore()回调：

onBefore: function( $currentTarget, $container ) {
  if ( $currentTarget.is( ".special_case" ) ) {
    // Some logic here
    globalSpecialCase = true;
  }
}

由于Javascript实际上将您保持在相同的位置，并且只是执行一个Ajax调用来请求新的页面smoothState，然后换出页面内容，所以您当前的Javascript环境仍然是全局变量和所有变量。因此，我设置了一个全局标志(或者您可以创建您想要的任何数据结构)，对于带有特殊链接的情况，设置该标志。

在加载新页面时，smoothState运行onReady()，这表明它已经获得了新页面内容，并准备替换它并运行介绍动画。您可以检查此处的标志，以便在页面开始呈现之前执行某些操作，也可以等到onAfter()回调发生，这意味着页面已完全加载并且所有过渡动画都已运行。在这一点上，我检查了标志，运行了一些逻辑，并取消了它的设置，以确保我已经为稍后单击的新链接做好了准备。

onReady: {
  duration: 0,
  render: function( $container, $newContent ) {
    if ( globalSpecialCase ) {
      // Logic because this page was loaded from a special link
      globalSpecialCase = false;
    }

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

需要注意的一件事是:几乎所有的smoothState示例都将onReady持续时间设置为0，这意味着onAfter()回调将在onReady()之后立即发生，而不管您的动画需要多长时间。如果实际上希望onAfter()等待动画完成，请确保将持续时间设置为动画所用的毫秒。