活动

¥Events

我们会分派一系列事件,以便你轻松响应演示中的变化。Reveal.on() 用于添加事件监听器,Reveal.off() 用于移除它们。

¥We dispatch a number of events to make it easy for you to react to changes in the presentation. Reveal.on() is used to add event listeners, and Reveal.off() is used to remove them.

Reveal.on('eventname', callbackFunction);

准备就绪

¥Ready

ready 事件会在 reveal.js 加载所有非异步依赖并准备好接受 API 调用时触发。要检查 reveal.js 是否已经是 'ready',你可以调用 Reveal.isReady()

¥The ready event is fired when reveal.js has loaded all non-async dependencies and is ready to accept API calls. To check if reveal.js is already 'ready' you can call Reveal.isReady().

Reveal.on('ready', (event) => {
  // event.currentSlide, event.indexh, event.indexv
});

我们还为 .reveal 元素添加了 .ready 类,以便你可以使用 CSS 将其关联到其中。

¥We also add a .ready class to the .reveal element so that you can hook into this with CSS.

Reveal.initialize 方法还会返回一个 Promise 对象,该对象在演示文稿准备就绪时解析。以下内容等同于为 ready 事件添加监听器:

¥The Reveal.initialize method also returns a Promise which resolves when the presentation is ready. The following is synonymous to adding a listener for the ready event:

Reveal.initialize().then(() => {
  // reveal.js is ready
});

幻灯片已更改

¥Slide Changed

每次幻灯片切换时,都会触发 slidechanged 事件。事件对象保存当前幻灯片的索引值以及对上一张幻灯片和当前幻灯片 HTML 元素的引用。

¥The slidechanged event is fired each time the slide changes. The event object holds the index values of the current slide as well as a reference to the previous and current slide HTML elements.

某些库,例如 MathJax(参见 #226),会对幻灯片的变换和显示状态感到困惑。通常,可以通过从此回调调用它们的更新或渲染函数来解决这个问题。

¥Some libraries, like MathJax (see #226), get confused by the transforms and display states of slides. Often times, this can be fixed by calling their update or render function from this callback.

Reveal.on('slidechanged', (event) => {
  // event.previousSlide, event.currentSlide, event.indexh, event.indexv
});

幻灯片过渡结束

¥Slide Transition End

slidechanged 事件会在幻灯片切换时立即触发。如果你希望在幻灯片完成过渡并完全可见时调用事件监听器,可以使用 slidetransitionend 事件。slidetransitionend 事件包含与 slidechanged 相同的事件数据。

¥The slidechanged event fires instantly as soon as the slide changes. If you'd rather invoke your event listener when the slide has finished transitioning and is fully visible, you can use the slidetransitionend event. The slidetransitionend event includes the same event data as slidechanged.

Reveal.on('slidetransitionend', (event) => {
  console.log(event.currentSlide);
});

调整大小

¥Resize

resize 事件会在 reveal.js 更改演示文稿的比例时触发。

¥The resize event is fired when reveal.js changes the scale of the presentation.

Reveal.on('resize', (event) => {
  // event.scale, event.oldScale, event.size
});

功能特定事件

¥Feature-specific Events