トランジション

プレゼンテーションをナビゲートするときは、スライド間でトランジションを行い、デフォルトでは右から左にスライドをアニメーション化します。このトランジションは、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>
電車は走り続け…
そして続け…
そして止まります。
(乗客の出入り)
そして再び始まります。

背景のトランジション

デフォルトでは、クロフェードを使用してスライドの背景間でトランジションします。これはグローバルレベルで変更したり、特定のスライドで上書きしたりできます

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

または、<section> の data-background-transition 属性を使用して、その特定のトランジションをオーバーライドできます。