过渡效果
¥Transitions
在演示文稿导航时,我们默认通过从右到左的动画来切换幻灯片。可以通过将 transition
配置选项设置为有效的 过渡样式 来更改此过渡效果。还可以使用 data-transition
属性覆盖特定幻灯片的过渡效果。
¥When navigating a presentation, we transition between slides by animating them from right to left by default. This transition can be changed by setting the transition
config option to a valid transition style. Transitions can also be overridden for a specific slide using the data-transition
attribute.
<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>
样式
¥Styles
这是所有可用过渡样式的完整列表。它们适用于幻灯片和幻灯片背景。
¥This is a complete list of all available transition styles. They work for both slides and slide backgrounds.
名称 | 效果 |
---|---|
none | 立即切换背景 |
fade | 交叉淡入淡出 - 背景过渡的默认设置 |
slide | 在背景之间滑动 - 幻灯片切换的默认设置 |
convex | 以凸角滑动 |
concave | 以凹角滑动 |
zoom | 放大传入的幻灯片,使其从屏幕中心向内延伸。 |
单独的进出过渡
¥Separate In-Out Transitions
你还可以通过在过渡名称后附加 -in
或 -out
,为同一张幻灯片使用不同的入点和出点过渡。
¥You can also use different in and out transitions for the same slide by appending -in
or -out
to the transition name.
<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>
背景过渡
¥Background Transitions
默认情况下,我们使用淡入淡出在幻灯片背景之间进行过渡。这可以在全局级别更改,也可以针对特定幻灯片进行覆盖。要更改所有幻灯片的背景过渡效果,请使用 backgroundTransition
配置选项。
¥We transition between slide backgrounds using a cross fade by default. This can be changed on a global level or overridden for specific slides. To change background transitions for all slides, use the backgroundTransition
config option.
Reveal.initialize({
backgroundTransition: 'slide',
});
或者,你也可以在任何 <section>
上使用 data-background-transition
属性来覆盖该特定过渡效果。
¥Alternatively you can use the data-background-transition
attribute on any <section>
to override that specific transition.