Question

当点击链接smoothstate加载新页面的内容时，我想在新页面上标识可见类的引用页面。有没有办法做到这一点？

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

由于smoothState实际上让你在同一个地方，只是做一个Ajax调用来请求新的页面HTML，然后交换页面内容，你当前的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（）后面的onAfter（）回调都会立即发生。如果你真的希望onAfter（）等到动画完成，请确保将持续时间设置为动画所用的毫秒数。

smoothState.js - 标识引用页面

1 个答案: