转场

在浏览展示文稿时，我们通过从右向左动画的方式在幻灯片之间进行过渡。可以通过将 transition 配置选项设置为有效的过渡样式来更改此过渡。还可使用 data-transition 属性覆盖特定幻灯片的过渡。

<section data-transition="zoom">
  <h2>This slide will override the presentation transition and zoom!</h2>
</section>

<section data-transition-speed="fast">
  <h2>Choose from three transition speeds: default, fast or slow!</h2>
</section>

样式

以下是所有可用过渡样式的完整列表。它们适用于幻灯片和幻灯片背景。

名称效果
none即时切换背景
fade交叉淡化 — 背景过渡的默认值
slide在背景之间滑动 — 幻灯片过渡的默认值
convex以凸角滑动
concave以凹角滑动
zoom将入场幻灯片向上缩放，使其从屏幕中心逐渐放大

分离入场和出场过渡

您还可以为同一个幻灯片使用不同的进入和退出过渡，方法是将 -in 或 -out 附加到过渡名称。

<section data-transition="slide">The train goes on …</section>
<section data-transition="slide">and on …</section>
<section data-transition="slide-in fade-out">and stops.</section>
<section data-transition="fade-in slide-out">
  (Passengers entering and leaving)
</section>
<section data-transition="slide">And it starts again.</section>
火车继续前进……
向前进……
然后停下了。
（乘客进出）
然后又重新启动了。

背景过渡

我们使用交叉淡入淡出以在幻灯片背景之间进行过渡。可以在全局级别更改此设置，也可以为特定幻灯片进行覆盖。要对所有幻灯片的背景过渡进行更改，请使用 backgroundTransition 配置选项。

Reveal.initialize({
  backgroundTransition: 'slide',
});

或者，您可以在任何 <section> 上使用 data-background-transition 属性来覆盖该特定过渡。