impress.js参考API

七月 03, 2019

javascript

[TOC]

此文档由亦可翻译,如果您想了解更多内容，wiki上还有一系列教程和其他学习资源。

impress.js使用了以下JS和CSS功能：

DataSet API
ClassList API
[CSS 3D变换](http://caniuse.com/#search=css 3d)
[CSS过渡](http://caniuse.com/#search=css transition)

参考API

HTML

Root Element 根元素

impress.js需要一个根元素。演示文稿的所有内容都将在该元素内创建。建议不要在初始化后操作由根元素内的impress.js创建的任何样式，属性或类。

Example:

1	<div id="impress"></div>

Step Element 步元素

步骤元素是包含元数据的元素，元数据定义了如何在屏幕中显示。步骤元素应包含.step类和可选id属性。内容表示将位于摄像机中心的html片段。在“步骤元素”中，您可以定义一组特定的默认属性和定位，如下所述。

Example:

1
2
3

<div id="bored" class="step" data-x="-1000">
    <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>

2D坐标定位（data-x，data-y）

限定像素基于位置，其中中心的的步骤元件 Step Element将定位在无限画布内。

Example:

1
2
3

<div id="bored" class="step" data-x="-1000" data-y="-1500">
    <q>Aren’t you just <b>bored</b> with all those slides-based presentations?</q>
</div>

2D缩放（数据缩放）

定义步骤元素相对于其他步骤元素Step Element 的缩放倍数。例如，data-scale=”4”表示该元素看起来比其他元素大4倍。从表示和转换的角度来看，这意味着必须按比例缩小（4次）才能使其恢复到正确的大小。

Example:

<div id="title" class="step" data-x="0" data-y="0" data-scale="4">
    <span class="try">then you should try</span>
    <h1>impress.js<sup>*</sup></h1>
    <span class="footnote"><sup>*</sup> no rhyme intended</span>
</div>

2D旋转（数据旋转）

表示元素相对于360度的顺时针旋转量。

Example:

<div id="its" class="step" data-x="850" data-y="3000" data-rotate="90" data-scale="5">
    <p>
      It’s a <strong>presentation tool</strong> <br>
      inspired by the idea behind <a href="http://prezi.com">prezi.com</a> <br>
      and based on the <strong>power of CSS3 transforms and transitions</strong> in modern browsers.
    </p>
</div>

3D坐标定位（data-z）

限定像素基于位置，其中中心的的步骤元件Step Element将被定位在第三维（Z）轴的无限画布内。例如，如果我们使用data-z=”-3000”，则意味着Step Element将远离相机定位（通过3000px）。

Example:

1
2
3

<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
    <p>and <b>tiny</b> ideas</p>
</div>

注意：rel插件的引入包括一个轻微的向后不兼容的更改。此前为默认值data-x，data-y并且data-z是零。该rel插件更改默认继承上一张幻灯片的价值。这意味着，如果它们非零，则需要将这些值显式设置为零。

3D旋转（data-rotate-x，data-rotate-y，data-rotate-z）

您不仅可以在3D中定位Step Element，还可以围绕任何轴旋转它。

例：

以下示例将绕X轴旋转-40度（逆时针40度），绕Y轴旋转10度（顺时针）。

您当然可以围绕Z轴旋转它data-rotate-z- 它具有与data-rotate（这两个基本上是别名）完全相同的效果

<div id="its-in-3d" class="step" data-x="6200" data-y="4300" data-z="-100" data-rotate-x="-40" data-rotate-y="10" data-scale="2">
    <p>
      <span class="have">have</span>
      <span class="you">you</span>
      <span class="noticed">noticed</span>
      <span class="its">it’s</span>
      <span class="in">in</span>
      <b>3D<sup>*</sup></b>?
    </p>
    <span class="footnote">* beat that, prezi ;)</span>
</div>

3D旋转顺序（数据 - 旋转顺序）

rotateX(), rotateY(), rotateZ()应用CSS 变换的顺序很重要。这是因为每次旋转都相对于元素的当前位置。

默认情况下，旋转顺序为data-rotate-order=”xyz”。对于某些高级用途，您可能需要更改它。演示演示3D旋转3D rotations 设置此属性以将某些步骤旋转到使用默认顺序无法到达的位置。

CSS

4D状态（.past，.present和.future类）

将.future类添加到所有步骤的元素还没有被访问过呢。

Example:

1
2
3

.future {
  display: none;
}

所述.present类被添加到步骤元素Step Element 是当前在照相机的中心。一旦相机导航到步骤内，这对于在步骤内创建动画很有用。

Example:

.present .rotating {
  transform: rotate(-10deg);
  transition-delay: 0.25s;
}

将.past类添加到所有步骤的元素Step Element 已经访问过至少一次。

Example:

1
2
3

.past {
  display: none;
}

当前活动步骤（.active类）
所述.active类被添加到步骤元素Step Element 是当前在照相机的中心可见。

Example:

.step {
  opacity: 0.3;
  transition: opacity 1s;
}
.step.active {
  opacity: 1
}

同时，将impress-on-*类添加到body元素中，类名表示活动的Step Element id。这允许自定义全局样式，因为您无法将CSS类从活动步骤元素Step Element 向后匹配到body。

Example:

.impress-on-overview .step {
    opacity: 1;
    cursor: pointer;
}
.impress-on-step-1,
.impress-on-step-2,
.impress-on-step-3 {
  background: LightBlue;
}

渐进增强（.impress-not-supported class）

将.impress-not-supported类添加到body元素如果浏览器不支持impress.js工作所需的功能，它是有用的CSS应用一些备用的风格。

没有必要在body元素上手动添加它。如果脚本检测到浏览器缺少重要功能，则会添加此类。

建议手动将类添加到body元素中，因为这意味着没有JavaScript的用户也将获得后备样式。当impress.js脚本检测到浏览器支持所有必需的功能时，.impress-not-support该类将从body元素中删除。
Example:

1
2
3

.impress-not-supported .step {
  display: inline-block;
}

插件

许多新功能都是作为插件实现的。该插件的文档是了解这些，还有的README.md的起始位置的每个插件。

JavaScript的impress( [ id ] )

用于创建ImpressAPI.的工厂函数。

接受String表示页面中根元素的id的a 。如果省略，impress.js将默认查找id为“impress”的元素。
Example:

1	var impressAPI = impress( "root" );

ImpressAPI

主要的impress.js API，用于处理impress.js的常见操作，如下所示。

。在里面（）
在页面中全局初始化impress.js。每个文档只支持一个impress.js实例。

.init()

I在页面中全局初始化impress.js。每个文档只支持一个impress.js实例。

Example:

1	impress().init();

初始化演示文稿后impress:init，在根元素中触发事件。

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:init", function() {
  console.log( "Impress init" );
});
impress().init();

.tear()

将DOM重置为其原始状态，就像之前init()调用的那样。

这可以用来“卸载”impress.js。对此的一个特殊用例是，如果要对演示文稿进行动态更改，可以进行拆卸，应用更改，然后init() 再次调用。（在大多数情况下，除了预期的动态变化之外，这不会对用户造成闪烁或其他可见效果。）

Example:

1	impress().tear();

.next()

使用该goto() function.导航到演示文稿的下一步。

Example:

1
2
3

var api = impress();
api.init();
api.next();

impress().prev()

使用该goto() function导航到演示文稿的上一步。

Example:

1
2
3

var api = impress();
api.init();
api.prev();

impress().goto( stepIndex | stepElementId | stepElement, [ duration ] )

接受Number 表示步骤索引的a。

导航到给定步骤索引的步骤。

Example:

1
2
3

var api = impress();
api.init();
api.goto(7);

接受 String表示步骤元素Step Element ID的a。

导航到给定提供的步骤元素 Step ElementID的步骤。
Example:

1
2
3

var api = impress();
api.init();
api.goto( "overview" );

接受HTMLElement 代表步骤元素Step Element的代码。

导航到给定步骤元素的步骤Step Element。

Example:

var overview = document.getElementById( "overview" );
var api = impress();
api.init();
api.goto( overview );

在最后一个参数中接受一个可选的Number，表示转换的持续时间（以毫秒为单位）。如果未提供，将使用演示文稿的默认转换持续时间。

当演示文稿导航到目标步骤元素Step Element.时impress:stepenter，在根元素Root Element中触发事件。

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepenter", function(event) {
  var currentStep = event.target;
  console.log( "Entered the Step Element '" + currentStep.id + "'" );
});

当演示文稿导航离开当前步骤元素 Step Element时impress:stepleave，在根元素 Root Element 中触发事件

Example:

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepleave", function(event) {
  var currentStep = event.target;
  var nextStep = event.detail.next;
  console.log( "Left the Step Element '" + currentStep.id + "' and about to enter '" + nextStep.id );
});

改进文档

你找到了可以改进的东西吗？然后创建 create an issue一个问题，以便我们讨论它！