创建sequence_使用Sequence.js创建动画产品滑块

秒速五厘米 2023-02-22 03:38 36阅读 0赞

创建sequence

In this tutorial, we're going to create a simple animated content slider with [Sequence.js][].

在本教程中，我们将使用[Sequence.js][]创建一个简单的动画内容滑块。

We'll base our demo on the Sequence.js Theme, [Mono][]. For the sake of brevity, our demo won't include everything that Mono does but you'll learn all of the Sequence.js key concepts, as well as having a good base to work from and start creating your own unique animated applications.

我们将基于Sequence.js主题[Mono进行][Mono]演示。 为简洁起见，我们的演示将不包含Mono所做的所有事情，但您将学习Sequence.js的所有关键概念，并有一个良好的基础可进行工作并开始创建自己的独特动画应用程序。

Take a look at the [demo here][], as well as some of the applications we've built in the [Sequence.js Theme Store][].

看一下[这里][demo here]的[演示][demo here] ，以及我们在[Sequence.js主题商店中][Sequence.js Theme Store]构建的一些应用程序。

See the Pen [Sequence.js - Mono][] by Ian Lunn ([@IanLunn][IanLunn]) on [CodePen][].

请参阅[CodePen][IanLunn]上的Ian Lunn( [@IanLunn][IanLunn] ) [撰写][CodePen]的Pen [Sequence.js-Mono][Sequence.js - Mono] 。

## 什么是Sequence.js **(**What is Sequence.js**)** ##

Sequence.js provides all of the functionality needed for animated step-based applications such as sliders and presentations. Its built-in CSS framework allows you to animate content as steps become active and inactive using simple *in* and *out* class names.

Sequence.js提供了基于动画的基于步骤的应用程序(如滑块和演示文稿)所需的所有功能。 其内置CSS框架，可以让你的动画内容，步骤*和* *退出*类名使用简单变得活跃和不活跃。

By describing content transitions in CSS, you can rely on hardware acceleration for smooth animation and media queries to make a responsive application using a workflow you are already familiar with.

通过描述CSS中的内容过渡，您可以依靠硬件加速来实现平滑的动画和媒体查询，从而使用您已经熟悉的工作流程制作响应式应用程序。

Sequence.js is supported in modern browsers with a traditional side-to-side fallback theme for Internet Explorer 8 and 9.

在现代浏览器中，支持Sequence.js的Internet Explorer 8和9具有传统的左右对边备用主题。

Sequence.js can be used free for personal use or with the purchase of a [license][] when used commercially.

Sequence.js可以免费用于个人用途，也可以在商业上购买[许可证后][license]购买。

## 项目设置 **(**Project Setup**)** ##

To start, [download the demo files here][] and unzip into your preferred location. These are the starters files that we'll add this tutorial's code to.

首先，请[在此处下载演示文件][download the demo files here]并解压缩到您的首选位置。 这些是我们将在本教程中添加代码的入门文件。

The zip contains the following folders and files:

zip包含以下文件夹和文件：

*  `css/demo.css` \- A stylesheet for our demo
    
    `css/demo.css`我们的演示的样式表
 *  `images` \- Contains the images we'll add shortly
    
    `images` \-包含我们不久将添加的图片
 *  `scripts` \- Contains the scripts required for Sequence.js
    
    `scripts` \-包含Sequence.js所需的脚本
 *  `index.html` \- The HTML page
    
    `index.html` \-HTML页面
 *  `CREDITS.md` \- Credits for some of the third-party assets we'll use
    
    `CREDITS.md`我们将使用的某些第三方资产的信用

*If you'd rather download the very latest version of Sequence.js, head to the [download page][] where you can download a zip or find instructions for installing via NPM or Bower.*

*如果您想下载最新版本的Sequence.js，请转到[下载页面][download page] ，您可以在其中下载zip或查找通过NPM或Bower安装的说明。*

Open `index.html` and you'll find the following basic HTML template:

打开`index.html` ，您将找到以下基本HTML模板：

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Sequence.js - Getting Started</title>
      <link href="css/demo.css" rel="stylesheet" media="all">
    </head>
    <body>
    
    </body>
    </html>

Here I've added a page title and referenced the style sheet `css/demo.css`. I've also added a `<meta name="viewport">` tag that tells the browser to make the viewport the same width as the device, with a scale of 100%; this sets up the page ready to be responsive across a wide range of devices.

在这里，我添加了页面标题，并引用了样式表`css/demo.css` 。 我还添加了一个`<meta name="viewport">`标记，该标记告诉浏览器使视口与设备具有相同的宽度，缩放比例为100％； 这样就可以设置页面，使其可以在各种设备上响应。

## 添加内容和结构 **(**Adding Content and Structure**)** ##

Let's begin adding the basic Sequence.js structure and some content to our page.

让我们开始向页面添加基本的Sequence.js结构和一些内容。

In `index.html` find the `<body>` element and inside it add the following:

在`index.html`找到`<body>`元素，并在其中添加以下内容：

<div id="sequence" class="seq">
      <ul class="seq-canvas">
        <li class="step1">
          <img class="feature" src="images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
        <h2 class="title">Bananas</h2>
        </li>
        <li class="step2">
          <img class="feature" src="images/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
          <h2 class="title">Coconut</h2>
        </li>
        <li class="step3">
          <img class="feature" src="images/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
          <h2 class="title">Orange</h2>
        </li>
      </ul>
    </div>

In the above code, we've added the Sequence.js basic structure and some content; an image and a title. Let's ignore the content and look at the Sequence.js structure.

在上面的代码中，我们添加了Sequence.js的基本结构和一些内容； 图片和标题。 让我们忽略内容，看一下Sequence.js结构。

When adding Sequence.js to a page, it must be made up of a *container*, *canvas*, and *steps*.

将Sequence.js添加到页面时，它必须由*容器* ， *画布*和*步骤组成* 。

The `<div id="sequence" class="seq">` element acts as the container. We've given it an ID which we'll use to attach the Sequence.js script to shortly. The `seq` class will be used to apply styles. Inside the container is the canvas element and steps. Any other elements such as navigation can also be placed inside the container.

`<div id="sequence" class="seq">`元素充当容器。 我们给了它一个ID，我们将使用该ID不久后将Sequence.js脚本附加到该ID。 `seq`类将用于应用样式。 容器内部是canvas元素和步骤。 任何其他元素(例如导航)也可以放置在容器内。

The canvas `<ul class="seq-canvas">` holds the steps. This can be any element providing it has the class `seq-canvas`. The canvas can be automatically animated by Sequence.js so that the active step is always in view. We'll experiment with this shortly.

画布`<ul class="seq-canvas">`包含这些步骤。 可以是任何具有`seq-canvas`类的元素。 可以通过Sequence.js自动对画布进行动画处理，以使活动步骤始终处于可见状态。 我们将很快对此进行试验。

Finally, the `<li>` elements break up our content into steps. You might like to think of steps as slides in a presentation for example -- we call them steps in Sequence.js because they do a whole lot more than just slide!

最后， `<li>`元素将我们的内容分为几个步骤。 例如，您可能想将步骤视为演示文稿中的幻灯片-我们在Sequence.js中将其称为步骤，因为它们所做的不仅是幻灯片！

As with the canvas, the steps can be any element you wish, providing they are the immediate descendants of the canvas. So you could use a canvas/steps structure such as:

与画布一样，这些步骤可以是您希望的任何元素，只要它们是画布的直接后代即可。 因此，您可以使用canvas / steps结构，例如：

The choice is yours.

这是你的选择。

*Note: I've given the steps class names `step1`, `step2`, and so on. This isn't required but we will use it in our demo to make the steps a different color.*

*注意：我给了步骤类名称`step1` ， `step2` ，依此类推。* *这不是必需的，但我们将在演示中使用它来使步骤变为不同的颜色。*

Inside a step is where content is placed. You're not limited to the content or HTML elements you can use.

在步骤内部是放置内容的位置。 您不限于可以使用的内容或HTML元素。

## 添加Sequence.js **(**Adding Sequence.js**)** ##

Now the content and structure is in place, we need to add the Sequence.js scripts.

现在内容和结构就位，我们需要添加Sequence.js脚本。

Before the closing `</body>` in the HTML, add the following scripts:

在HTML结束符`</body>`之前，添加以下脚本：

The scripts are as follows:

脚本如下：

*  [imagesLoaded][] \- Third-party providing preloader functionality for Sequence.js
    
    [imagesLoaded-][imagesLoaded]第三方为Sequence.js提供预加载器功能
 *  [Hammer.js][] \- Third-party providing touch functionality for Sequence.js
    
    [Hammer.js-][Hammer.js]第三方为Sequence.js提供触摸功能
 *  sequence.min.js - The main Sequence.js script that provides the animation framework and other functionality
    
    sequence.min.js-提供动画框架和其他功能的主要Sequence.js脚本
 *  demo.js - A Sequence.js options file for our demo
    
    demo.js-用于演示的Sequence.js选项文件

The third-party scripts are optional and only need be added if you want to use preloader and touch support. The options file is where we'll attach Sequence.js to our HTML, change options, and if you wish, add custom functionality.

第三方脚本是可选的，仅在要使用预加载器和触摸支持时才需要添加。 在选项文件中，我们将Sequence.js附加到HTML，更改选项，并根据需要添加自定义功能。

Open `scripts/demo.js` and add the following:

打开`scripts/demo.js`并添加以下内容：

var sequenceElement = document.getElementById("sequence");
    
    var options = {
    
    }
    
    var mySequence = sequence(sequenceElement, options);

This is the basic code required to initiate Sequence.js on a webpage. The first line gets the element we want to have Sequence.js applied to (the container element with ID of `sequence`), the second changes Sequence.js options, and the third initiates Sequence.js on our chosen element.

这是在网页上启动Sequence.js所需的基本代码。 第一行获取我们要应用Sequence.js的元素(具有ID为`sequence`的容器元素)，第二行更改Sequence.js选项，第三行在我们选择的元素上初始化Sequence.js。

It is a good idea to enable the [keyNavigation][] option when developing with Sequence.js so you can navigate between slides via your keyboards left/right arrows. To do this, add the following to the `options` object:

在使用Sequence.js开发时，最好启用[keyNavigation][]选项，以便您可以通过键盘的左/右箭头在幻灯片之间导航。 为此，将以下内容添加到`options`对象：

var options = {
      keyNavigation: true
    }

Save the file.

保存文件。

## 容器布局 **(**Container Layout**)** ##

Now our structure and content are in place, let's add some basic styles.

现在我们的结构和内容就位了，让我们添加一些基本样式。

In `css/demo.css`, add the following:

在`css/demo.css` ，添加以下内容：

body,
    html,
    .seq {
    
      /* #1 */
      width: 100%;
      height: 100%;
    
      /* #2 */
      margin: 0;
      padding: 0;
    }
    
    .seq {
    
      /* #1 */
      position: relative;
    
      /* #2 */
      overflow: hidden;
    
      /* #3 */
      font-family: sans-serif;
    }
    
    .seq-canvas,
    .seq-canvas > * {
    
      /* #1 */
      height: 100%;
      width: 100%;
    
      /* #2 */
      margin: 0;
      padding: 0;
      list-style: none;
    }

The `body, html, .seq` elements:

`body, html, .seq`元素：

1.  Are made fullscreen via `width` and `height`
    
    通过`width`和`height`全屏显示
2.  Have their `margin` and `padding` reset for better browser consistency
    
    重置其`margin`和`padding`以提高浏览器的一致性

The `.seq` container element:

`.seq`容器元素：

1.  Is positioned so all absolute elements within are relative to it
    
    定位成使其中的所有绝对元素都相对于它
2.  Prevents any elements inside of it from showing outside should they overflow
    
    防止其中的任何元素在溢出时不显示在外面
3.  Is given a basic font
    
    被赋予基本字体

The canvas `.seq.canvas` and steps `.seq-canvas > *`:

画布`.seq.canvas`和步骤`.seq-canvas > *` ：

1.  Are made fullscreen via `width` and `height`
    
    通过`width`和`height`全屏显示
2.  Have some styles reset including removing the disc applied to `<li>` elements by default
    
    重置一些样式，包括默认情况下删除应用于`<li>`元素的光盘

These are the basic styles we'll use for our demo and we'll make it look nice later. For the most part, they're the styles you can use for starting out with any Sequence.js application. Our demo is going to take up the full browser window so if you plan on adding a Sequence.js application to a content webpage, you probably don't want to do this. Instead you could remove the `.body, .html, .seq` ruleset entirely and apply `width`/`height` properties to the `.seq` ruleset instead. For example, the following would make the container full width but with a defined height:

这些是我们将在演示中使用的基本样式，稍后我们将使它看起来更漂亮。 在大多数情况下，它们是您可以从任何Sequence.js应用程序开始使用的样式。 我们的演示将占用整个浏览器窗口，因此，如果您打算将Sequence.js应用程序添加到内容网页，则可能不想这样做。 相反，您可以完全删除`.body, .html, .seq`规则集，并将`width` / `height`属性应用于`.seq`规则集。 例如，以下内容将使容器变为全宽，但具有定义的高度：

.seq {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 600px;
      font-family: sans-serif;
    }

You could use `height: 90vh` to make the container 90% of the viewport height, use a [CSS technique to maintain aspect ratio][] (we use this for our official [Sequence.js themes][Sequence.js Theme Store]), and so on. There are few restrictions when it comes to using CSS with Sequence.js. The choice is yours.

您可以使用`height: 90vh`来使容器成为视口高度的90％，使用[CSS技术来保持纵横比][CSS technique to maintain aspect ratio] (我们将其用于我们的官方[Sequence.js主题][Sequence.js Theme Store] )，依此类推。 将CSS与Sequence.js一起使用时，几乎没有限制。 这是你的选择。

## 画布布局和动画 **(**Canvas Layout and Animation**)** ##

*We're not going to use canvas animation for this tutorial but the following is included to demonstrate how easy it is to automatically animate the canvas in Sequence.js. If you want to skip ahead, continue reading and following instructions from [No Canvas Animation][].*

*在本教程中，我们不会使用画布动画，但是包含了以下内容，以演示在Sequence.js中自动对画布进行动画处理是多么容易。* *如果要跳过，请继续阅读并遵循[No Canvas Animation中的说明][No Canvas Animation] 。*

![The canvas being automatically animated bottom-to-top][]

Let's preview what we have so far in a browser. If everything is set up correctly, you can press your keyboard's left/right arrow keys and Sequence.js will automatically animate the canvas so the active step always appears in the container.

让我们预览一下到目前为止浏览器中的内容。 如果一切设置正确，则可以按键盘的左/右箭头键，Sequence.js将自动为画布设置动画，因此活动步骤始终显示在容器中。

By default, the [`canvasAnimation`][canvasAnimation] option in Sequence.js is `true`. With this option enabled, Sequence.js will automatically animate the canvas by getting a step's offset position and moving the canvas so that the active step's top left corner meets the container's top left corner. This means you can position your steps top-to-bottom, side-by-side, or in a custom layout and the canvas will automatically move to show the active step in the container.

默认情况下，Sequence.js中的[`canvasAnimation`][canvasAnimation]选项为`true` 。 启用此选项后，Sequence.js将通过获取步骤的偏移位置并移动画布来自动为画布设置动画，以使活动步骤的左上角与容器的左上角相交。 这意味着您可以自上而下，并排或自定义布局中放置步骤，画布将自动移动以在容器中显示活动步骤。

*Note: CSS transforms do not effect an element's offset position so it is best to layout steps via `position` and `top`, `bottom`, `left`, `right` properties. Sequence.js is smart enough to be able to take these property values and animate the canvas using a CSS transform which has better performance when animated.*

*注意：CSS转换不会影响元素的偏移位置，因此最好通过`position`和`top` ， `bottom` ， `left` ， `right`属性来布局步骤。* *Sequence.js足够聪明，能够获取这些属性值，并使用CSS变换对画布进行动画处理，动画效果更好。*

*Note 2: The speed at which the canvas animates can be changed by specifying a millisecond value for the [`animateCanvasDuration`][animateCanvasDuration] option.*

*注2：通过为[`animateCanvasDuration`][animateCanvasDuration]选项指定毫秒值，可以更改画布动画的速度。*

Let's experiment with the layout to see automatic canvas animation in progress.

让我们尝试一下布局，以查看正在进行的自动画布动画。

### 并排布局 **(**Side-by-Side Layout**)** ###

We made each step take up the full width and height of a container. Because of this, the browser by default wraps them so they appear below each other and the canvas animates up and down to show each active step.

我们使每一步都占据了容器的整个宽度和高度。 因此，默认情况下，浏览器会将它们包装起来，使它们显示在彼此下方，并且画布上下进行动画处理以显示每个活动步骤。

To make the steps sit side-by-side instead, you could use the following:

要使这些步骤并排放置，可以使用以下方法：

.seq-canvas {
      /* #1 */
      white-space: nowrap;
    }
    
    .seq-canvas > * {
      /* #1 */
      display: inline-block;
      vertical-align: top;
    
      /* #2 */
      white-space: normal;
    }

In the `.seq-canvas` ruleset the canvas is prevented from wrapping elements (pushing them onto a new line).

在`.seq-canvas`规则`.seq-canvas`阻止画布包装元素(将元素推入新行)。

The `.seq-canvas > *` ruleset:

`.seq-canvas > *`规则集：

1.  Makes the steps sit side-by-side now the canvas will let them do it
    
    使步骤并排放置，现在画布将允许他们这样做
2.  Resets the white-space back to normal so the steps don't inherit `nowrap` from the canvas
    
    将空白重置为正常状态，这样步骤就不会继承画布中的`nowrap`

![The canvas animating side-to-side][]

### 自定义布局 **(**Custom Layout**)** ###

How about a custom layout? Try the following:

自定义布局怎么样？ 尝试以下方法：

.seq-canvas > * {
      position: absolute;
    }
    
    .step2 {
      top: 2000px;
      left: 2000px;
    }
    
    .step3 {
      top: 4000px;
      left: 4000px;
    }

Here the steps are positioned `absolute` and then given `top` and `left` properties to position them wherever we please.

在这里，这些步骤位于`absolute`位置，然后赋予`top`和`left`属性以将它们`left`在我们希望的任何位置。

![Canvas animation - custom][]

### 没有画布动画(步骤在同一位置) **(**No Canvas Animation (Steps in the Same Place)**)** ###

For this tutorial we won't actually use canvas animation, instead we'll just animate content (which we'll look at shortly). To disable canvas animation, place all of the steps in the same place by adding the following to `css/demo.css`:

在本教程中，我们实际上不会使用画布动画，而只是对内容进行动画处理(我们将在稍后介绍)。 要禁用画布动画，请将以下步骤添加到`css/demo.css` ，将所有步骤放在同一位置：

.seq-canvas > * {
      /* #1 */
      position: absolute;
    }

Because Sequence.js knows the steps are all in the same place now, it won't animate the canvas. As good practice though, it's worth turning off canvas animation in the options too. Update the `options` object in `scripts/demo.js` like so:

因为Sequence.js知道这些步骤现在都在同一位置，所以不会为画布设置动画。 不过，作为一种好的做法，也应该在选项中关闭画布动画。 像这样更新`scripts/demo.js`的`options`对象：

options = {
      keyNavigation: true,
      animateCanvas: false
    }

![The steps positioned in the same place][]

The application will look pretty bad at this point. As we've now positioned all of the steps in the same place, the content from each step is overlapping. In Animating Content, we'll fix this by hiding content in inactive steps and only showing content when its step is active.

此时应用程序看起来会很糟糕。 现在我们将所有步骤都放在同一位置，每个步骤的内容是重叠的。 在动画内容中，我们将通过以不活动的步骤隐藏内容并仅在其步骤处于活动状态时显示内容来解决此问题。

## 添加内容样式 **(**Adding Content Styles**)** ##

Now we've looked at what's possible with canvas animation, let's improve the look of our demo before moving onto Animating Content.

现在，我们研究了画布动画的可能性，让我们在进入动画内容之前改善演示的外观。

When a step becomes active, the container element `<div id="sequence" class="seq">` is given a class name "seq-stepX", the X being replaced by the step number, for example `.seq-step1`.

当步骤变为活动状态时，容器元素`<div id="sequence" class="seq">`被赋予类名称“ seq-stepX”，其中X由步骤号替换，例如`.seq-step1` 。

To change the background color each time the step changes, add at the bottom of `css/demo.css`:

要在每次更改步骤时更改背景颜色，请在`css/demo.css`的底部添加：

.seq-step1 {
      background-color: #2A93BC;
    }
    
    .seq-step2 {
      background-color: #6BC85E;
    }
    
    .seq-step3 {
      background-color: #45367E;
    }

How about we animate that too? Update the `.seq` ruleset to the following:

我们也可以制作动画吗？ 将`.seq`规则集更新为以下内容：

.seq {
    
      /* #1 */
      position: relative;
    
      /* #2 */
      overflow: hidden;
    
      /* #3 */
      font-family: sans-serif;
      color: white;
      text-align: center;
    
      /* #4 */
      background-color: #2A93BC;
    
      /* #5 */
      transition-duration: .5s;
      transition-property: background-color;
    }

*Note: For brevity we won't use browser prefixes in this tutorial for elements such as `transition-duration` but at the time of writing, you should use the -webkit- prefix to make the demo work in Safari and iOS browsers.*

*注意：为简洁起见，在本教程中我们不会为`transition-duration`元素使用浏览器前缀，但是在撰写本文时，您应使用-webkit-前缀使该演示在Safari和iOS浏览器中正常工作。*

Here we've:

在这里，我们已经：

1.  Set the text color to white and center aligned it
    
    将文字颜色设置为白色并居中对齐
2.  Made the background color initially the same color as step 1 (because the application starts on step 1)
    
    使背景色最初与步骤1相同(因为应用程序从步骤1开始)
3.  Applied a half second transition to the background color
    
    对背景颜色应用了半秒的过渡

![Animating the background color][]

When you navigate through the application now, the background color will transition to a new color with each step.

现在，当您浏览应用程序时，背景色将在每个步骤中转换为新颜色。

Our content is still overlapping but this nicely demonstrates another feature of Sequence.js. By default, its [`moveActiveStepToTop`][moveActiveStepToTop] option is enabled, which gives the active step a higher `z-index` value than the rest so it always appears on top.

我们的内容仍然重叠，但这很好地演示了Sequence.js的另一个功能。 默认情况下，其[`moveActiveStepToTop`][moveActiveStepToTop]选项处于启用状态，它为活动步骤提供了比其余步骤更高的`z-index`值，因此它始终显示在顶部。

We want the application to be responsive so it nicely fits on the page regardless of the browser width. At the bottom of `css/demo.css`, add the following:

我们希望应用程序具有响应能力，因此无论浏览器的宽度如何，它都能很好地适合页面。 在`css/demo.css`的底部，添加以下内容：

.feature {
      width: 70%;
      max-width: 100%;
      height: auto;
    }
    
    @media only screen and (min-width: 460px) and (min-height: 520px) {
      .feature {
        width: 100%;
      }
    }

This will make the images responsive; filling their container by 70% on devices less than 460px wide and 520px high, and 100% on bigger devices, but never breaking aspect ratio or exceeding the images original width.

这将使图像具有响应性； 在宽度小于460像素和高度520像素的设备上将容器填充70％，在较大的设备上将容器填充100％，但不会破坏宽高比或超出图像的原始宽度。

*Note: This isn't a perfect solution. In the final demo, the pagination overlaps the image when the browser height is less than 360px for example. In the Mono theme that this demo is based on, I used multiple media queries and based the images height on the viewport via the `vh` unit where appropriate. To keep this tutorial simple, we won't cover that here.*

*注意：这不是一个完美的解决方案。* *在最终的演示中，例如，当浏览器高度小于360px时，分页将与图像重叠。* *在此演示基于的Mono主题中，我使用了多个媒体查询，并在适当的情况下通过`vh`单元在视口上确定了图像的高度。* *为了使本教程简单，我们将不在此处进行介绍。*

Let's also add some whitespace around the images by updating the `.seq-canvas > *` ruleset as follows:

我们还通过如下更新`.seq-canvas > *`规则集，在图像周围添加一些空格：

.seq-canvas > * {
      /* #1 */
      position: absolute;
    
      /* #2 */
      padding: 32px;
      box-sizing: border-box;
    }

This adds a 32px space around the edge of each step. However, because in another ruleset we set the steps to have 100% width, the browser sees this as being 100% plus 64px (32px either side), which makes the content overflow the window and no longer centered. The `box-sizing` property tells the browser to include padding in its calculation of width to work around this.

这将在每个步骤的边缘周围添加32px的空间。 但是，由于在另一个规则集中，我们将步骤设置为具有100％的宽度，因此浏览器将其视为100％加64像素(每侧32像素)，这使内容溢出了窗口且不再居中。 `box-sizing`属性告诉浏览器在宽度计算中包括填充以解决此问题。

![Making the application responsive][]

Now finally, let's vertically align the content. As you may know, vertically centering in CSS is a little painful. You can use whatever method you prefer but as I'd like this demo to support Internet Explorer 8+, I'll use the "Ghost Element" technique as explained in [Centering in the Unknown][].

现在最后，让我们垂直对齐内容。 如您所知，在CSS中垂直居中有点痛苦。 您可以使用任何喜欢的方法，但是正如我希望此演示文稿支持Internet Explorer 8+一样，我将使用“ [未知][Centering in the Unknown]元素中的[中心][Centering in the Unknown] ”中介绍的“幽灵元素”技术。

This requires wrapping our content in a `<div>`, so in `index.html` change each step's HTML so they now appear like this:

这需要将我们的内容包装在`<div>` ，因此在`index.html`更改每个步骤HTML，以使它们现在如下所示：

<li class="step1 valign">
      <div class="vcenter">
        <img class="feature" src="images/bananas.png" alt="A cartoon illustration of a bunch of bananas" width="389" height="300" />
        <h2 class="title">Bananas</h2>
      </div>
    </li>
    <li class="step2 valign">
      <div class="vcenter">
        <img class="feature" src="images/coconut.png" alt="A cartoon illustration of half a coconut" width="325" height="300" />
        <h2 class="title">Coconut</h2>
      </div>
    </li>
    <li class="step3 valign">
      <div class="vcenter">
        <img class="feature" src="images/orange.png" alt="A cartoon illustration of a round orange" width="350" height="300" />
        <h2 class="title">Orange</h2>
      </div>
    </li>

Save the file, then to `css/demo.css`, add the following:

保存文件，然后将其添加到`css/demo.css` ，添加以下内容：

.valign:before {
      content: "";
      height: 100%;
    }
    
    .valign:before,
    .valign > .vcenter {
      display: inline-block;
      vertical-align: middle;
    }
    
    .valign {
      font-size: 0;
    }
    
    .valign > .vcenter {
      font-size: 16px;
    }

![Content vertically and horizontally centered][]

The content at the moment still looks broken but your application should now look like the above.

目前的内容仍然看起来很破损，但是您的应用程序现在应该像上面的样子。

## 动画内容 **(**Animating Content**)** ##

Sequence.js is most powerful when animating content. Content can be animated using CSS transitions and the classes `seq-in` and `seq-out` to describe the *in* and *out* positions for content when a step becomes active and inactive.

设置内容动画时，Sequence.js最强大。 可以使用CSS过渡和`seq-in`和`seq-out`类对内容进行动画处理`seq-out`以描述步骤变为活动状态和非活动状态时内容的*输入*和*输出*位置。

To demonstrate this, when a step becomes active, let's make the title of each step go from transparent in its *start* position, opaque in its *in* position, and then back to transparent in its *out* position.

为了证明这一点，当步变为活动，让我们从透明的每一步走的称号，它的*起始*位置，不透明*在*其位置，然后再返回到透明在它的*出*位置。

At the bottom of `css/demo.css` add the following:

在`css/demo.css`的底部添加以下内容：

.title {
      /* #1 */
      margin: 0;
    
      /* #2 */
      opacity: 0;
    
      /* #3 */
      transition-duration: .5s;
      transition-property: opacity;
    }

This is considered the *start* position for an element. It has no specific CSS class unlike `seq-in` and `seq-out` because it is the default position.

这被视为元素的*起始*位置。 与`seq-in`和`seq-out`不同，它没有特定CSS类`seq-out`因为它是默认位置。

We've specified:

我们已指定：

1.  The title should have no `margin` (a cosmetic change)
    
    标题不应有`margin` (外观变化)
2.  The title should be transparent and if that changes,
    
    标题应该透明，如果更改，
3.  Transition over a half second period
    
    在半秒内过渡

Now, below this ruleset, add:

现在，在此规则集下方，添加：

.seq-in .title {
      /* #1 */
      opacity: 1;
    }

When a step becomes active, Sequence.js will give it the class `seq-in` and the title element will transition from `opacity: 0` to `opacity: 1` over a half second period.

当某个步骤变为活动状态时，Sequence.js将为它提供`seq-in`类`seq-in`并且title元素将在半秒内从`opacity: 0`转换为`opacity: 1` 。

![Animating content in][]

Try it in the browser. Each time you hit the right arrow on your keyboard, the next step becomes active and the title fades in.

在浏览器中尝试一下。 每次您按键盘上的向右箭头，下一步就会激活，并且标题会淡入。

When the active step is navigated away from and is no longer active, the `seq-in` class is replaced with `seq-out`. We could use this to make the content element fade out but actually that is already occurring. As the `seq-in` class is removed when the step becomes inactive, the default styles from the *start* position are applied again.

当活动步骤离开并不再活动时， `seq-in`类将替换为`seq-out` 。 我们可以使用它使内容元素淡出，但实际上已经在发生。 当步骤变为非活动状态时，由于删除了`seq-in`类，因此将再次应用从*开始*位置*开始*的默认样式。

Use the `seq-out` class when you'd like to apply a different animation for the transition to the *out* position or maintain the same style as applied via the `seq-in` class.

当您想要应用不同的动画以过渡到*out*位置或保持与通过`seq-in`类应用的样式相同时，请使用`seq-out`类。

Let's get a little more advanced. Update the `.title` ruleset with the following:

让我们更高级一些。 使用以下更新`.title`规则集：

.title {
      /* #1 */
      margin: 0;
    
      /* #2 */
      opacity: 0;
      transform: translateX(50px) translateZ(0);
    
      /* #3 */
      transition-duration: .5s;
      transition-property: opacity, transform;
    }

We've updated the transition so now the title starts 50px to the right of its original position and when this changes, will also cause a transition along with the opacity.

我们已经更新了过渡效果，现在标题从其原始位置的右侧开始50px，并且当更改时，也会导致过渡以及不透明度。

*Note: We're making use of the translateZ(0) trick to cause the browser to use [hardware acceleration][] for the transition. This makes animations smoother, especially on mobile devices.*

*注意：我们正在利用translateZ(0)技巧使浏览器使用[硬件加速][hardware acceleration]进行过渡。* *这使动画更加流畅，尤其是在移动设备上。*

Now update the *in* position:

现在更新*的*位置：

.seq-in .title {
      opacity: 1;
      transform: translateX(0) translateZ(0);
    }

Take a look in the browser again...

再次在浏览器中查看...

![Animating multiple properties on content][]

When a step becomes active the title now fades and floats into position from the side. When a step becomes inactive, the title returns to its *start* position but that kinda looks weird right? Here's where we can use the `seq-out` class to make the title move to the left so navigating through our application seems more like a natural progression.

激活步骤后，标题将逐渐消失并从侧面浮动到位。 当某个步骤变为非活动状态时，标题返回其*开始*位置，但看起来有点奇怪吧？ 在这里，我们可以使用`seq-out`类将标题移到左侧，因此浏览我们的应用程序似乎更自然。

Add the following:

添加以下内容：

.seq-out .title {
      opacity: 0;
      transform: translateX(-50px) translateZ(0);
    }

![Animating content out][]

Now when a step becomes inactive the title animates to the left instead.

现在，当某个步骤变为非活动状态时，标题将改为向左移动。

Let's apply the same technique to the images. Add the following to `css/demo.css`:

让我们对图像应用相同的技术。 将以下内容添加到`css/demo.css` ：

.feature {
      transform: translateZ(0) scale(0);
      transition-duration: .5s;
      transition-property: transform, opacity;
    }
    
    .seq-in .feature {
      transform: translateZ(0) scale(1);
    }
    
    .seq-out .feature {
      transform: translateZ(0) scale(1);
      opacity: 0;
    }

Save the file.

保存文件。

With these rules we achieve the following:

使用这些规则，我们可以实现以下目标：

1.  Scale the image down to nothing (so it can't be seen) in the *start* position and make transitions occur over half a second
    
    在*开始*位置将图像缩小至无(因此无法看到)，并在半秒钟内进行过渡
2.  Scale the image to full size in the *in* position
    
    *在*适当位置将图像缩放到全尺寸
3.  Maintain the full size scale but fade-out in the *out* position
    
    保持全尺寸规模，但淡出*伸出*位置

![Animating content complete][]

Now the images will have a zoom-in effect when their step becomes active and fade out when they become inactive.

现在，当图像的步长变为活动状态时，它们将具有放大效果；而当它们的步长变为无效时，它们将消失。

Although what I've shown here is very basic, this simple animation framework provided by Sequence.js is incredibly powerful. Animate multiple properties and elements in 2D and 3D space, make them move, fade, scale, rotate, and more. What you can achieve is only limited by your imagination.

尽管我在这里展示的内容非常基础，但是Sequence.js提供的这个简单的动画框架非常强大。 在2D和3D空间中对多个属性和元素进行动画处理，使其移动，淡入淡出，缩放，旋转等等。 您只能凭想象力来实现目标。

Take a look at some of the examples we've created in the [Sequence.js Theme Store][].

看看我们在[Sequence.js主题商店中][Sequence.js Theme Store]创建的一些示例。

Hopefully you're excited to try out some of your own ideas at this point. Feel free to experiment but continue reading to learn more about Sequence.js, and in particular, the most important concept to make sure your application works fully, Watching Animated Elements.

希望您现在很高兴尝试一些自己的想法。 随时尝试，但请继续阅读以了解有关Sequence.js的更多信息，尤其是最重要的概念，以确保您的应用程序完全正常运行，即观看动画元素。

### 观看动画元素 **(**Watching Animated Elements**)** ###

An important concept to learn when using Sequence.js is [*watching* animated content][watching_ animated content].

使用Sequence.js时要学习的一个重要概念是[*观看*动画内容][watching_ animated content] 。

As transitions are specified via CSS, Sequence.js can't be sure which elements will be animating and when they'll end. We need to let it know which elements it should watch.

由于过渡是通过CSS指定的，因此Sequence.js不能确定哪些元素会设置动画以及何时结束。 我们需要让它知道应该注意哪些元素。

Watching elements is required for many Sequence.js features to work such as [autoPlay][], [phaseThreshold][] (a customizable delay between the *in* and *out* transitions), [reverseWhenNavigatingBackwards][], and more. For example, when autoPlay is enabled Sequence.js will automatically navigate to the next step once the current step has finished animating after a period of X milliseconds (by default 5000ms/5 seconds as defined by the [autoPlayInterval option][]). Without watching elements, Sequence.js will navigate to the next slide every 5 seconds regardless of the length of animations. So, if your animations last for longer than 5 seconds, the next step will be navigated to before the current one has even finished.

[要使][phaseThreshold]许多Sequence.js功能正常工作，需要[监视][phaseThreshold]元素，例如[autoPlay][] ， [phaseThreshold][] ( *in*和*out*过渡之间的可自定义延迟)， [reverseWhenNavigatingBackwards][]等。 例如，启用autoPlay后，当X毫秒(默认为5000ms / 5秒，由[autoPlayInterval选项][autoPlayInterval option]定义)后，当前步骤完成动画制作后，Sequence.js将自动导航至下一步。 不看元素，Sequence.js将每5秒导航到下一张幻灯片，而不管动画的长度如何。 因此，如果动画的持续时间超过5秒钟，则下一步将导航到当前步骤，直到当前步骤结束为止。

Watching elements is as simple as adding the attribute `data-seq` to the element(s) we want to watch.

监视元素就像将属性`data-seq`添加到我们要监视的元素一样简单。

*Tip: It isn't always necessary to watch elements. For example, you might want content to transition in and out over 1 second, but have a background image slowly transition for much longer and not prevent Sequence.js from automatically navigating to the next step via autoPlay. The general rule of thumb is that if the transition is applied to content you should watch it. If it's just a decorative transition, you don't need to.*

*提示：不一定总是需要监视元素。* *例如，您可能希望内容在1秒内切入和切出，但是背景图像要缓慢过渡更长的时间，并且不阻止Sequence.js通过autoPlay自动导航到下一步。* *一般的经验法则是，如果将过渡应用于内容，则应观看它。* *如果只是装饰性过渡，则不需要。*

Now we have our content transitions in place, let's watch the elements they're applied to.

现在，我们已经完成了内容转换，让我们看一下它们所应用的元素。

In `index.html`, find each instance of the `<img class="feature" />` and `<h2 class="title">` elements, and add the `data-seq` attribute to them like so:

在`index.html` ，找到`<img class="feature" />`和`<h2 class="title">`元素的每个实例，然后向其添加`data-seq`属性，如下所示：

and:

和：

With these elements now watched (6 in total; 2 for each step), when we navigate to a step, Sequence.js will be able to determine how long they transition for. If autoPlay is enabled in this scenario for example, when the step becomes active, Sequence.js will wait half a second for the longest transition to finish before starting its 5 second countdown for autoPlay to automatically navigate to the next step.

现在已经观察了这些元素(总共6个；每个步骤2个)，当我们导航到一个步骤时，Sequence.js将能够确定它们过渡的时间。 例如，如果在这种情况下启用了自动播放，则当该步骤变为活动状态时，Sequence.js将等待半秒钟以完成最长的过渡，然后再开始5秒钟的倒计时，以使自动播放自动导航到下一步。

![Showing the phaseThreshold between steps when elements are watched][]

Save what you have so far and preview in the browser again. Notice that the next step now takes longer to animate in. We've told Sequence.js it should watch the image and title elements so it is waiting for the current step's transitions to end before starting the next. This threshold between the *in* and *out* phases is known as the Phase Threshold and can be changed via the [phaseThreshold option][phaseThreshold].

保存目前为止的内容，然后在浏览器中再次预览。 注意，现在下一步需要花费更长的时间进行动画处理。我们已经告诉Sequence.js，它应该监视image和title元素，以便它在开始下一步骤之前等待当前步骤的转换结束。 *输入*和*输出*相位之间的此阈值称为“相位阈值”，可以通过[phaseThreshold选项][phaseThreshold]进行更改。

### 处理阶段阈值 **(**Handling Phase Threshold**)** ###

The phase threshold is the duration between the current step animating out and the next step animating in. By default, the `phaseThreshold` option is set to `true`, meaning the next step will animate in only once the current one has animated out (providing watched elements are correctly set up). Instead, let's make both phases (the *in* and *out* transitions) occur at the same time.

相位阈值是从当前步骤动画到进入下一步之间的持续时间。默认情况下， `phaseThreshold`选项设置为`true` ，这意味着仅当当前动画激活后，下一步才可以进行动画处理( `phaseThreshold`已观看的元素是正确设置)。 取而代之的是，我们让两个阶段*(IN*和*OUT*转换)发生在同一时间。

In `scripts/demo.js`, in the `options` object, add `phaseThreshold: false`, like so:

在`scripts/demo.js`的`options`对象中，添加`phaseThreshold: false` ，如下所示：

var options = {
      keyNavigation: true,
      animateCanvas: false,
      phaseThreshold: false
    }

The current step will now animate out at the same time the next step will animate in. This achieves the same as what we had prior to watching elements because Sequence.js couldn't determine how long the transitions would last and just started both the *in* and *out* phases at the same time.

现在，当前步骤将进行动画处理，而下一步骤将进行动画处理。这与观看元素之前的效果相同，因为Sequence.js无法确定过渡将持续多长时间，并且只是开始了两次过渡*。* *进出*与此同时阶段。

The `phaseThreshold` option can also be given a custom time in milliseconds, for example `phaseThreshold: 250` will delay the next step from animating in for 250 milliseconds.

还可以给定`phaseThreshold`选项一个以毫秒为单位的自定义时间，例如`phaseThreshold: 250`将使下一步动画时间延迟250毫秒。

### 反向动画 **(**Animating in Reverse**)** ###

When navigating in reverse (hitting your keyboard's left arrow and going from step 3, to step 2, and so on), the current experience doesn't quite feel natural because our transitions are still playing forwards. Sequence.js can automatically reverse transitions via the [`reverseWhenNavigatingBackwards` option][reverseWhenNavigatingBackwards_ option].

反向导航时(按键盘的左箭头并从第3步转到第2步，依此类推)，由于我们的过渡仍在进行，因此当前的体验不太自然。 Sequence.js可以通过[`reverseWhenNavigatingBackwards`选项][reverseWhenNavigatingBackwards_ option]自动反转过渡。

In the options file `scripts/demo.js`, enable `reverseWhenNavigatingBackwards` like so:

在选项文件`scripts/demo.js` ，像这样启用`reverseWhenNavigatingBackwards` ：

var options = {
      keyNavigation: true,
      animateCanvas: false,
      phaseThreshold: false,
      reverseWhenNavigatingBackwards: true
    }

![Automatic transition reversing][]

With this option enabled, you can see our transitions now work in reverse automatically. The titles slide in from left-to-right and the images fade in, then zoom out.

启用此选项后，您可以看到我们的转换现在自动反向运行。 标题从左到右滑入，图像淡入，然后缩小。

## 添加下一个/上一个和分页按钮 **(**Adding Next/Previous and Pagination Buttons**)** ##

During development, we've been using the keyboard's left/right arrow keys to navigate between steps. The user might not know to do this though so instead, let's add some user interface buttons. This is super easy with Sequence.js.

在开发过程中，我们一直在使用键盘的左/右箭头键在步骤之间导航。 用户可能不知道这样做，但是，让我们添加一些用户界面按钮。 使用Sequence.js超级简单。

In `index.html`, after the `<ul class="seq-canvas"></ul>` element but still inside the container, add the following:

在`index.html` ，在`<ul class="seq-canvas"></ul>`元素之后但仍在容器内，添加以下内容：

Now add the following to `css/demo.css` to style the buttons:

现在将以下内容添加到`css/demo.css`以设置按钮样式：

.nav {
      /* #1 */
      position: absolute;
      z-index: 100;
      left: 0;
      right: 0;
      bottom: 2.5em;
      max-width: 640px;
      width: 100%;
    
      /* #2 */
      border: none;
      margin: 0 auto;
      padding: 0;
    }
    
    .seq-next,
    .seq-prev {
      /* #1 */
      padding: 0;
      background: transparent;
      border: none;
    
      /* #2 */
      padding: .75em;
      cursor: pointer;
      color: white;
      font-size: .75em;
      text-transform: uppercase;
    
      /* #3 */
      opacity: .7;
      transition-duration: .25s;
      transition-property: opacity;
    }
    
    .seq-next:hover,
    .seq-prev:hover {
      opacity: 1;
    }

The `.nav` ruleset:

`.nav`规则集：

1.  Positions the element holding the buttons 40px from the bottom
    
    将元素的位置从底部放置40px
2.  Resets styles on the `<fieldset>` element
    
    重置`<fieldset>`元素上的样式

The `.seq-next, .seq-prev` ruleset:

`.seq-next, .seq-prev`规则集：

1.  Resets the styles
    
    重置样式
2.  Adds some general styles such as font-size and color
    
    添加一些常规样式，例如字体大小和颜色
3.  Sets up the `opacity` so that it will transition from 70% transparency to opaque when hovered over
    
    设置`opacity`以便将鼠标悬停在其上时将从70％的透明度转换为不透明

Save your HTML and preview in the browser. The buttons now allow you to navigate to the next/previous step. By giving an element inside a Sequence.js container the class `seq-prev` or `seq-next`, you're letting Sequence.js know they should act as previous and/or next buttons. The functionality required for them to work is taken care of, so you needn't worry about the JavaScript.

保存HTML并在浏览器中预览。 这些按钮现在使您可以导航到下一个/上一个步骤。 通过为Sequence.js容器内的元素提供`seq-prev`或`seq-next` ，可以让Sequence.js知道它们应充当上一个和/或下一个按钮。 它们工作所需的功能已得到照顾，因此您不必担心JavaScript。

Using the class `seq-pagination`, you can also add pagination links to an application.

使用`seq-pagination`类，您还可以将分页链接添加到应用程序。

Back in `index.html`, find the line `` and replace it with the following example HTML for pagination:

返回`index.html` ，找到``行``并将其替换为以下示例HTML以进行分页：

The pagination must consist of a container and links; links being the immediate descendant of the container. The first immediate descendant will link to the first step, and so on. As with the Sequence.js container, canvas, and steps, the markup you use here is entirely up to you. Providing you add the class of `seq-pagination` to an element that has immediate descendants, you've got pagination!

分页必须包含一个容器和链接； 链接是容器的直接后代。 第一个直接后代将链接到第一步，依此类推。 与Sequence.js容器，画布和步骤一样，此处使用的标记完全由您决定。 如果您将`seq-pagination`类添加到具有直接后代的元素中，那么您就可以获得分页！

Save `index.html` then to `css/demo.css` add the following:

保存`index.html`然后将以下内容添加到`css/demo.css` ：

.seq-next,
    .seq-prev,
    .seq-pagination {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      margin-top: 0;
    }
    
    .seq-pagination {
      margin: 0 1em;
      padding: 0;
    }
    
    .seq-pagination li {
      /* #1 */
      position: relative;
    
      /* #2 */
      list-style: none;
    
      /* #3 */
      display: inline-block;
      vertical-align: middle;
    
      /* #4 */
      width: 50px;
      height: 40px;
      margin: 0 .25em;
    }
    
    .seq-pagination li:before {
      /* #1 */
      content: "";
      display: block;
      position: absolute;
      top: 100%;
      left: 50%;
      width: 6px;
      height: 6px;
      margin-left: -3px;
      margin-top: .5em;
      border-radius: 50%;
      background: white;
    
      /* #2 */
      opacity: 0;
      transition-duration: .25s;
      transition-property: opacity;
    }
    
    .seq-pagination .seq-current:before {
      opacity: .7;
    }
    
    .seq-pagination img,
    .seq-pagination a {
      display: block;
      border: none;
    }

The `.seq-next, .seq-prev, .seq-pagination` ruleset makes the next/previous buttons and pagination sit side-by-side.

`.seq-next, .seq-prev, .seq-pagination`规则集使下一个/上一个按钮和分页并排放置。

The pagination is given a little space either side in the `.seq-pagination` ruleset.

在`.seq-pagination`规则集中， `.seq-pagination`两侧`.seq-pagination`一些空白。

The `.seq-pagination li` ruleset achieves the following:

`.seq-pagination li`规则集实现以下目标：

1.  Position the links so a dot that indicates the active step can be positioned relative to it
    
    定位链接，以便可以相对于它定位一个表示活动步骤的点
2.  Removes the disc from the `<li>` element
    
    从`<li>`元素中取出光盘
3.  Makes each link sit side-by-side
    
    使每个链接并排放置
4.  Gives the links dimensions and space
    
    给出链接的尺寸和空间

We then add the current link indicator via a pseudo-element in the `.seq-pagination li:before` ruleset, which does the following:

然后，我们通过`.seq-pagination li:before`规则集中的伪元素添加当前链接指示符，该操作将执行以下操作：

1.  Positions the dot underneath the image acting as a pagination link
    
    将点放置在图像下方作为分页链接
2.  Makes the dot transparent but sets up a transition so that when a link becomes active, the dot fades in
    
    使点透明，但设置过渡，以便当链接变为活动状态时，点淡入

After that we use the `.seq-current` class. This is added by Sequence.js to any pagination link that is associated with the current step so it can be styled. In our case, we used the ruleset `.seq-pagination .seq-current:before` to make our dot appear 70% opaque.

之后，我们使用`.seq-current`类。 Sequence.js将此添加到与当前步骤关联的任何分页链接，以便对其进行样式设置。 在我们的例子中，我们使用规则集`.seq-pagination .seq-current:before`使点看起来不透明70％。

In the ruleset `.seq-pagination img, .seq-pagination a`, we reset styles on the pagination image and link.

在规则集`.seq-pagination img, .seq-pagination a` ，我们重置了分页图像上的样式并链接。

Now finally, because our content is currently vertically aligned to the canvas, in relation to the new pagination it seems a little off. Let's instead vertically center the content in the space between the top of the page and the top of the pagination, by updating `.seq-canvas > *`:

现在最后，由于我们的内容当前与画布垂直对齐，因此相对于新的分页，似乎有些偏离。 让我们通过更新`.seq-canvas > *`来使内容垂直位于页面顶部和分页顶部之间的空间中：

.seq-canvas > * {
      /* #1 */
      position: absolute;
    
      /* #2 */
      padding: 32px;
      box-sizing: border-box;
    
      /* #3 */
      height: auto;
      top: 0;
      bottom: 80px;
    
    }

The final block of code (3) removes the height of `100%` that we previously set on the steps, and replaces it with `top: 0` and `bottom: 80px`. Now each step's height will be from the very top of the canvas but 80px from the bottom, leaving enough space for the pagination. We get the value of `80px` because the pagination is positioned 40px from the bottom and is also 40px tall.

最后的代码块(3)删除了我们先前在台阶上设置的`100%`的高度，并将其替换为`top: 0`和`bottom: 80px` 。 现在，每个步骤的高度将从画布的最上端开始，但从底部开始高度为80px，为分页留出足够的空间。 我们获得`80px`的值，因为分页距底部40px，并且高度也为40px。

![Adding pagination to control the slider][]

Pretty easy to add these important user interface elements right? Now a user can easily navigate and skip between steps, knows at all times which slide they're on, and how many make up the application.

添加这些重要的用户界面元素非常容易，对吧？ 现在，用户可以轻松地在步骤之间导航和跳过，随时了解他们正在播放哪个幻灯片以及组成应用程序的数量。

## 浏览器支持 **(**Browser Support**)** ##

We're almost done with our application but as is always important, we need to make sure it works cross-browser.

我们的应用程序几乎完成了，但始终很重要，我们需要确保它可以跨浏览器工作。

Firstly, you may notice that the pagination wraps onto a new line if you reduce the browser width below 300px or the pagination overlaps the title when the browser height is less than 350px. We won't do it in this tutorial for the sake of brevity but as you'll see in the official [Mono theme][], I used media queries to solve these issues.

首先，如果您将浏览器宽度减小到300px以下，或者当浏览器高度小于350px时，该分页与标题重叠，则您可能会注意到分页会换行。 为了简洁起见，我们不会在本教程中这样做，但是正如您将在官方[Mono主题中][Mono theme]看到的那样，我使用媒体查询来解决这些问题。

I will however show you how to make the application usable when JavaScript is disabled, as well as in browsers that don't support CSS transitions, such as Internet Explorer 8 and 9.

但是，我将向您展示禁用JavaScript以及不支持CSS过渡的浏览器(例如Internet Explorer 8和9)中如何使应用程序可用。

### Internet Explorer 8和9 **(**Internet Explorer 8 & 9**)** ###

Internet Explorer 8 and 9, being older browsers, don't support CSS transitions. To work around this, Sequence.js goes into [Fallback Mode][].

Internet Explorer 8和9是较旧的浏览器，不支持CSS转换。 要解决此问题，Sequence.js进入[后备模式][Fallback Mode] 。

In Fallback Mode, all steps are given the class `seq-in` to force the content into its active position. Then, rather than the content animating, the canvas is animated side-to-side much like a traditional slider.

在“后备模式”下，所有步骤都被赋予了类`seq-in`以强制内容进入其活动位置。 然后，不像对内容进行动画处理一样，画布像传统的滑块一样被并排动画处理。

![Sequence.js in Fallback Mode][]

When it is necessary to give these older browsers specific styles, aside from using [conditional comments][], you can also use the Sequence.js class `seq-fallback` which is applied to the container element when in Fallback Mode.

除了使用[条件注释外][conditional comments] ，有必要为这些旧版浏览器提供特定样式时，还可以使用Sequence.js类`seq-fallback` ，该类在后备模式下将应用于容器元素。

### 没有JavaScript后备 **(**No JavaScript Fallback**)** ###

When JavaScript is disabled the slide content doesn't appear, only the pagination. This is because Sequence.js can't add the `seq-in` class to any of the steps.

禁用JavaScript后，幻灯片内容不会显示，只会显示分页。 这是因为Sequence.js无法将`seq-in`类添加到任何步骤中。

A part-solution is to manually add `seq-in` class onto the step you'd like to appear when JavaScript is disabled, like so:

一个部分解决方案是将`seq-in`类手动添加到禁用JavaScript时要显示的步骤，如下所示：

The first step's content now appears but the pagination is still visible yet not working.

现在出现了第一步的内容，但分页仍然可见，但不起作用。

To work around this, we can make use of the `seq-active` class. This is progressively applied to the container element when JavaScript is enabled so when it's not, we can write non-JavaScript styles.

要解决此问题，我们可以使用`seq-active`类。 启用JavaScript时，它会逐步应用到容器元素，因此如果未启用，我们可以编写非JavaScript样式。

For example, the next/previous buttons are useless without the JavaScript functionality to make them work. We could use the following to differentiate between states where JavaScript is disabled and enabled; hiding/showing those buttons accordingly:

例如，如果没有JavaScript功能，则下一个/上一个按钮将无用。 我们可以使用以下代码区分禁用和启用JavaScript的状态； 相应地隐藏/显示这些按钮：

.seq-next,
    .seq-prev {
      /* Hide buttons when JavaScript is disabled */
      display: none;
    }
    
    .seq-active .seq-next,
    .seq-active .seq-prev {
      /* Show buttons when JavaScript is enabled */
      display: inline-block;
    }

We won't go any further than that in this tutorial but for the application we're creating, when JavaScript is disabled we could make the steps and content relative so they wrap one below the other and the user can navigate between each step like they would a traditional web page.

除了本教程之外，我们不会做其他任何事情，但是对于我们正在创建的应用程序，禁用JavaScript时，我们可以使步骤和内容相对，以便它们在另一个下面包装，并且用户可以像在它们之间浏览每个步骤。一个传统的网页。

## 结论 **(**Conclusion**)** ##

This tutorial aims to give you a basic understanding of the main features and concepts in Sequence.js. With help of the official [documentation][], you should now be able to start making your very own unique animated applications.

本教程旨在使您对Sequence.js的主要功能和概念有基本的了解。 在官方[文档的][documentation]帮助下，您现在应该可以开始制作自己独特的动画应用程序了。

As you've seen, Sequence.js is a progressive solution. It only aims to simplify the design of animated applications by providing all the functionality you may need in a workflow you're already familiar with. How you tackle the issues of meaningful animation, responsive design, accessibility, and user experience is left yo you -- which is a good thing!

如您所见，Sequence.js是一个渐进式解决方案。 它仅旨在通过提供您已经熟悉的工作流程中可能需要的所有功能来简化动画应用程序的设计。 您将如何解决有意义的动画，响应式设计，可访问性和用户体验的问题，这是一件好事！

I'd love to see what you create with Sequence.js so please feel free to share in the comments, via [Twitter][], [CodePen][CodePen 1], and so on.

我希望看到您使用Sequence.js创建的内容，因此请随时通过[Twitter][] ， [CodePen等][CodePen 1]在评论中分享。

The complete version of the Mono Sequence.js theme can be [downloaded here][].

可以在[此处下载][downloaded here] Mono Sequence.js主题的完整版本。

## 学分 **(**Credits**)** ##

Fruit Illustrations made available under a Public Domain license by [OpenClipartVectors][].

[OpenClipartVectors][]在Public Domain许可下提供的Fruit Illustrations。

[Arrow][] icon by [Yordi Uytersprot][] from [the Noun Project][].

来自[Noun Project][the Noun Project]的[Yordi Uytersprot的][Yordi Uytersprot] [箭头][Arrow]图标。

> 翻译自: [https://davidwalsh.name/creating-animated-product-slider-sequencejs][https_davidwalsh.name_creating-animated-product-slider-sequencejs]

创建sequence

[Sequence.js]: http://www.sequencejs.com/
[Mono]: http://www.sequencejs.com/themes/mono
[demo here]: http://codepen.io/IanLunn/pen/c9e3b2523c8a7d0ce4072c36d3150c42
[Sequence.js Theme Store]: http://www.sequencejs.com/themes/
[Sequence.js - Mono]: http://codepen.io/IanLunn/pen/qObKVR/
[IanLunn]: http://codepen.io/IanLunn
[CodePen]: http://codepen.io
[license]: http://www.sequencejs.com/licenses/
[download the demo files here]: https://github.com/IanLunn/sequencejs-tutorial-mono/archive/master.zip
[download page]: http://www.sequencejs.com/download/
[imagesLoaded]: http://imagesloaded.desandro.com/
[Hammer.js]: http://hammerjs.github.io/
[keyNavigation]: http://www.sequencejs.com/documentation/#keynavigation
[CSS technique to maintain aspect ratio]: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/
[No Canvas Animation]: https://davidwalsh.name/creating-animated-product-slider-sequencejs#no-canvas-animation-steps-in-the-same-place
[The canvas being automatically animated bottom-to-top]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvY2FudmFzLWFuaW1hdGlvbi1kZWZhdWx0LmdpZg
[canvasAnimation]: http://www.sequencejs.com/documentation/#canvas-animation
[animateCanvasDuration]: http://www.sequencejs.com/documentation/#animatecanvasduration
[The canvas animating side-to-side]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvY2FudmFzLWFuaW1hdGlvbi1zaWRlLWJ5LXNpZGUuZ2lm
[Canvas animation - custom]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvY2FudmFzLWFuaW1hdGlvbi1jdXN0b20uZ2lm
[The steps positioned in the same place]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvbm8tY2FudmFzLWFuaW1hdGlvbi5wbmc?x-oss-process=image/format,png
[Animating the background color]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYmFja2dyb3VuZC1hbmltYXRpb24uZ2lm
[moveActiveStepToTop]: http://www.sequencejs.com/documentation/#moveactivesteptotop
[Making the application responsive]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvcmVzcG9uc2l2ZS5wbmc?x-oss-process=image/format,png
[Centering in the Unknown]: https://css-tricks.com/centering-in-the-unknown/
[Content vertically and horizontally centered]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvY29udGVudC12ZXJ0aWNhbGx5LWFsaWduZWQucG5n?x-oss-process=image/format,png
[Animating content in]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYW5pbWF0aW5nLWNvbnRlbnQtaW4uZ2lm
[hardware acceleration]: http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/
[Animating multiple properties on content]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYW5pbWF0aW5nLWNvbnRlbnQtbXVsdGlwbGUtcHJvcGVydGllcy5naWY
[Animating content out]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYW5pbWF0aW5nLWNvbnRlbnQtb3V0LmdpZg
[Animating content complete]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYW5pbWF0aW5nLWNvbnRlbnQtY29tcGxldGUuZ2lm
[watching_ animated content]: http://www.sequencejs.com/documentation/#watch-elements
[autoPlay]: http://www.sequencejs.com/documentation/#autoplay
[phaseThreshold]: http://www.sequencejs.com/documentation/#phasethreshold
[reverseWhenNavigatingBackwards]: http://www.sequencejs.com/documentation/#reversewhennavigatingbackwards
[autoPlayInterval option]: http://www.sequencejs.com/documentation/#autoplayinterval
[Showing the phaseThreshold between steps when elements are watched]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvZGVtb25zdHJhdGluZy1waGFzZXRocmVzaG9sZC10cnVlLmdpZg
[reverseWhenNavigatingBackwards_ option]: http://sequencejs.com/documentation/#reversewhennavigatingbackwards
[Automatic transition reversing]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYXV0b21hdGljLXRyYW5zaXRpb24tcmV2ZXJzaW5nLmdpZg
[Adding pagination to control the slider]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvYWRkaW5nLXBhZ2luYXRpb24uZ2lm
[Mono theme]: http:/www.sequencejs.com/themes/mono/
[Fallback Mode]: http://www.sequencejs.com/documentation/#fallback-mode
[Sequence.js in Fallback Mode]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9zZXF1ZW5jZS1qcy1pbWFnZXMvZmFsbGJhY2stbW9kZS5naWY
[conditional comments]: http://www.quirksmode.org/css/condcom.html
[documentation]: http://www.sequencejs.com/documentation
[Twitter]: https://www.twitter.com/IanLunn/
[CodePen 1]: http://codepen.io/
[downloaded here]: http://www.sequencejs.com/themes/mono/
[OpenClipartVectors]: https://pixabay.com/en/users/OpenClipartVectors-30363/
[Arrow]: https://thenounproject.com/search/?q=next&i=38228
[Yordi Uytersprot]: https://thenounproject.com/yordi.uytersprot/
[the Noun Project]: https://thenounproject.com/
[https_davidwalsh.name_creating-animated-product-slider-sequencejs]: https://davidwalsh.name/creating-animated-product-slider-sequencejs