如何使用 CSS 和 smoothState.js 添加页面过渡

CSS 动画（以及一些 JavaScript 技巧）可以让我们添加页面过渡，并摆脱页面加载的硬切。我的 jQuery 插件 smoothState.js 有助于完善这些过渡并提高 UI 响应时间。

页面过渡有益于用户体验

想象一下，如果你触碰门把手，就会被传送到门的另一边，那会是多么令人迷失方向。浏览网页的感觉就像使用传送门把手一样。布局会改变，元素会重新排列或消失，用户需要时间来适应。平滑的过渡减少了用户在新的环境中安顿下来的努力。

原生应用程序了解动画的重要性。很少有应用程序没有页面过渡，用户也已经习惯了这种更高水平的可用性。由于这种预期变化，网络开始感觉过时了。许多人认为网络体验不如应用程序。幸运的是，情况不必如此。

使用 CSS @keyframes 动画添加页面过渡

让我们看一个例子，看看如何开始添加页面过渡。在我们的演示布局中，我们可以看到网页典型的白色闪烁和硬切。

CSS 动画允许我们定义元素在页面上呈现时的视觉行为。要向我们的网站添加动画，我们应该

1. 识别页面上的元素将如何动画
2. 创建我们需要的关键帧
3. 编写 CSS 声明
4. 向布局添加类

识别页面上的元素将如何动画

让我们看看我们的示例页面

如果我们检查布局，可以找到一些添加过渡的机会。Google 关于有意义的过渡的指南是一套很好的元素动画规则。如果您是交互设计新手，可以从这里开始。

创建我们需要的 @keyframes

看起来我们需要三种类型的独特动画。

1. 一个用于标题和按钮的淡入动画
2. 一个带有轻微淡入效果的向上滑动动画，用于主页的内容
3. 一个带有轻微淡入效果的从右侧滑入动画，用于详情页的内容

让我们创建这些 CSS @keyframes 并为它们命名

/*
 * Keyframes
 */

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    transform: translate3d(100%, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
  }
}

}

编写 CSS 声明

现在我们有了关键帧，我们需要使用 CSS 动画属性将它们附加到类。以下是 CSS 代码：

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  /** Basic styles for an animated element */
  .scene_element {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  /** An element that fades in */
  .scene_element--fadein {
    animation-name: fadeIn;
  }

  /** An element that fades in and slides up */
  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  /** An element that fades in and slides from the right */
  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }
}

重要的是要注意，动画时间过长会让用户感到厌烦。关于响应时间可用性的研究有很多。为了让 UI 感觉敏捷，请将动画持续时间限制在0.25 秒。进行一些快速粗略的用户测试，以确保您的动画不会让人感到厌烦。

向布局添加类

现在我们已经编写了 CSS，是时候将类添加到标记中了。

<!-- Home page -->
<div class="m-scene" id="main">
  <div class="m-header scene_element scene_element--fadein">
    ...
  </div>
  <div class="m-page scene_element scene_element--fadeinup">
    ...
  </div>
</div>

<!-- Detail page -->
<div class="m-scene" id="main">
  <div class="m-aside scene_element scene_element--fadein">
    ...
  </div>
  <div class="m-right-panel m-page scene_element scene_element--fadeinright">
    ...
  </div>
</div>

我们的结果是更美观的页面入口

我们仅仅使用 CSS 就对页面进行了一些改进。但是，即使有了这些改进，我们仍然看到闪烁，而且动画不像它们可以的那样紧凑。现在，我们将使用 smoothState.js 来解决这个问题。

使用 smoothState.js 添加光彩

smoothState.js 是一个 jQuery 插件，它逐步增强页面加载，使我们能够更好地控制页面过渡。要将它包含到我们的页面中，我们需要

1. 获取 jQuery 的副本并将其添加到我们的页面中
2. 下载 smoothState.js 并将其添加到 jQuery 之后。
3. 创建一个新 .js 文件并将其包含在 smoothState.js 之后，我们可以在其中运行该插件。（或者使用您用于执行所有此操作的构建工具/连接过程。）

在我们的新 .js 文件中，我们希望使用 id 初始化 smoothState 到一个容器中。该容器应该包含页面上的所有内容。

;(function ($) {
  'use strict';
  var content  = $('#main').smoothState({
        // onStart runs as soon as link has been activated
        onStart : {
          
          // Set the duration of our animation
          duration: 250,
          
          // Alterations to the page
          render: function () {

            // Quickly toggles a class and restarts css animations
            content.toggleAnimationClass('is-exiting');
          }
        }
      }).data('smoothState'); // makes public methods available
})(jQuery);

smoothState 为我们提供了一个 onStart.render() 回调，它允许我们编排元素退出页面的方式。我们可以在显示新内容之前反转布局动画，从而消除页面的硬切。要执行此操作，请运行 .toggleAnimationClass() 函数，将类作为第一个参数传递。现在，我们将使用该类声明一个新的动画方向。

/*
 * CSS Page Transitions
 * Don't forget to add vendor prefixes!
 */
.m-scene {
  .scene_element {
    animation-duration: 0.25s;
    transition-timing-function: ease-in;
    animation-fill-mode: both;

  }

  .scene_element--fadein {
    animation-name: fadeIn;
  }

  .scene_element--fadeinup {
    animation-name: fadeInUp;
  }

  .scene_element--fadeinright {
    animation-name: fadeInRight;
  }

  /** Reverse "exit" animations */
  &.is-exiting {
      .scene_element {
        animation-direction: alternate-reverse;
      }
  }
}

我们还希望将用户动画回页面顶部。通过使用 jQuery 的 .animate() 函数并将 scrollTop 属性设置为 0 来实现这一点。

;(function ($) {
  'use strict';
  var $body    = $('html, body'), // Define jQuery collection 
      content  = $('#main').smoothState({
        onStart : {
          duration: 250,
          render: function () {
            content.toggleAnimationClass('is-exiting');
            
            // Scroll user to the top
            $body.animate({ 'scrollTop': 0 });

          }
        }
      }).data('smoothState');
})(jQuery);

最终的结果是网站页面之间的平滑过渡。元素优雅地进入和退出页面，白色闪烁消失了。我们甚至在内容加载之前就触发了动画，因此用户会看到页面立即响应。

查看代码库