在构建应用程序或网站时，页面之间的转换是需要考虑的一个重要设计方面。从用户体验的角度来看，过渡是用来引导和引导访问者的眼睛的。它们还提供了整体体验的一致性，使每个页面都具有独特的个性

SmoothState是一个逐步增强的jQuery插件，它在页面之间导航时为您的网站添加平滑和可配置的转换。SmoothState重量轻且简单，但具有大量功能：

特征：

• 使用AJAX获取页面。
• 自动更新URL和浏览历史记录。
• 可与CSS3动画和第三方动画库配合使用。
• 允许在将鼠标悬停在链接上时预取页面内容。
• 也适用于锚定链接。

参见：

• JavaScript中的10个最佳页面转换插件

如何使用它:

1.加载smoothState jQuery插件的缩小版。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.smoothState.min.js"></script>

2.将页面内容添加到具有uniue ID的包装器元素中。

<div id="wrapper">
  Page Content 
</div>

3.使用以下回调将您自己的CSS或JavaScript支持的转换添加到页面。

const options = {

      // before loading a page
      onBefore: function($currentTarget, $container) {},

      // when starting loading a page
      onStart: {
        // How long this animation takes
        duration: 0,
        // A function that dictates the animations that take place
        render: function ($container) {}
      },

      // when loading a page
      onProgress: {
        // How long this animation takes
        duration: 0,
        // A function that dictates the animations that take place
        render: function ($container) {}
      },

      // when the page is ready
      onReady: {
        duration: 0,
        render: function ($container, $newContent) {
          // Update the HTML on the page
          $container.html($newContent);
        }
      },

      // after the page is loaded
      onAfter: function($container, $newContent) {}
      
  }

4.初始化smoothState。

smoothState = $('#wrapper').smoothState(options).data('smoothState');

5.更多插件选项。

/** If set to true, smoothState will log useful debug information instead of aborting */
debug: false,

/** jQuery selector to specify which anchors smoothState should bind to */
anchors: 'a',

/** Regex to specify which href smoothState should load. If empty, every href will be permitted. */
hrefRegex: '',

/** jQuery selector to specify which forms smoothState should bind to */
forms: 'form',

/** If set to true, smoothState will store form responses in the cache. */
allowFormCaching: false,

/** Minimum number of milliseconds between click/submit events. Events ignored beyond this rate are ignored. */
repeatDelay: 500,

/** A selector that defines what should be ignored by smoothState */
blacklist: '.no-smoothState',

/** If set to true, smoothState will prefetch a link's contents on hover */
prefetch: false,

/** The name of the event we will listen to from anchors if we're prefetching */
prefetchOn: 'mouseover touchstart',

/** jQuery selector to specify elements which should not be prefetched */
prefetchBlacklist: '.no-prefetch',

/** The response header field name defining the request's final URI. Useful for resolving redirections. */
locationHeader: 'X-SmoothState-Location',

/** The number of pages smoothState will try to store in memory */
cacheLength: 0,

/** Class that will be applied to the body while the page is loading */
loadingClass: 'is-loading',

/** Scroll to top after onStart and scroll to hash after onReady */
scroll: true,

/**
 * A function that can be used to alter the ajax request settings before it is called
 * @param  {Object} request - jQuery.ajax settings object that will be used to make the request
 * @return {Object}         Altered request object
 */
alterRequest: function (request) {
  return request;
},

/**
 * A function that can be used to alter the state object before it is updated or added to the browsers history
 * @param  {Object} state - An object that will be assigned to history entry
 * @param  {string} title - The history entry's title. For reference only
 * @param  {string} url   - The history entry's URL. For reference only
 * @return {Object}         Altered state object
 */
alterChangeState: function (state, title, url) {
  return state;
},

6.初始化smoothState。

// load a page into the current container
smoothState.load(url)

// fetch content from a specific page
smoothState.fetch(url)

// clear the page from the cache
smoothState.clear(url)

// restart CSS animations
smoothState.restartCSSAnimations()

预览截图

强大 页面转换插件 jQuery smoothState