自動アニメーション 4.0.0

reveal.js は、スライド間の要素を自動的にアニメーション化できます。隣接する2つのスライドの <section> 要素に data-auto-animate を追加するだけで、自動アニメーションは2つの間で一致するすべての要素をアニメーション化します。

使用方法をよりよく理解するための簡単な例を次に示します。

<section data-auto-animate>
  <h1>Auto-Animate</h1>
</section>
<section data-auto-animate>
  <h1 style="margin-top: 100px; color: red;">Auto-Animate</h1>
</section>

この例では、margin-top プロパティを使用して要素を移動していますが、内部的には reveal.js はスムーズな動きを確実にするために CSS 変換を使用します。アニメーション化可能なほとんどの CSS プロパティでこの同じアニメーション手法が機能するため、position、font-size、line-height、color、background-color、padding、margin などを遷移させることができます。

移動アニメーション

アニメーションはスタイルの変更に限定されません。自動アニメーションを使用して、コンテンツがスライドに追加、削除、または再配置されるときに、要素を新しい位置に自動的に移動することもできます。インライン CSS を1行も使用せずに、すべてが可能です。

<section data-auto-animate>
  <h1>Implicit</h1>
</section>
<section data-auto-animate>
  <h1>Implicit</h1>
  <h1>Animation</h1>
</section>

要素の照合方法

2つの自動アニメーションスライド間を移動すると、2つのスライドで一致する要素を自動的に見つけるために最善を尽くします。テキストの場合、テキストの内容とノードタイプが同一であれば一致すると見なします。画像、ビデオ、iframe の場合は、src 属性を比較します。また、要素が DOM に表示される順序も考慮します.

自動照合が不可能な場合は、アニメーション化するオブジェクトに一致する data-id 属性を付与できます。自動照合よりも一致する data-id 値を優先します。

自動照合ではコンテンツがないため、両方のブロックに一致する ID を付与した例を次に示します。

<section data-auto-animate>
  <div data-id="box" style="height: 50px; background: salmon;"></div>
</section>
<section data-auto-animate>
  <div data-id="box" style="height: 200px; background: blue;"></div>
</section>

アニメーション設定

イージングや継続時間などの特定のアニメーション設定を、プレゼンテーション全体、スライドごと、またはアニメーション化された各要素ごとに個別にオーバーライドできます。次の設定属性を使用して、特定のスライドまたは要素の設定を変更できます

デッキ全体のデフォルトを変更する場合は、次の設定オプションを使用します

Reveal.initialize({
  autoAnimateEasing: 'ease-out',
  autoAnimateDuration: 0.8,
  autoAnimateUnmatched: false,
});

自動アニメーション ID と再起動

自動アニメーションスライドの個別のグループを互いに隣接させたい場合は、data-auto-animate-id 属性と data-auto-animate-restart 属性を使用できます。

data-auto-animate-id を使用すると、スライドに任意の ID を指定できます。隣接する2つのスライドは、同じ ID を持つ場合、または両方とも ID を持たない場合にのみ自動アニメーション化されます。

自動アニメーションを制御する別の方法は、data-auto-animate-restart 属性です。この属性をスライドに適用すると、前のスライドとそのスライド間の自動アニメーションは防止されます（同じ ID を持っている場合でも）が、そのスライドと次のスライド間の自動アニメーションは防止され *ません*。

<section data-auto-animate>
  <h1>Group A</h1>
</section>
<section data-auto-animate>
  <h1 style="color: #3B82F6;">Group A</h1>
</section>
<section data-auto-animate data-auto-animate-id="two">
  <h1>Group B</h1>
</section>
<section data-auto-animate data-auto-animate-id="two">
  <h1 style="color: #10B981;">Group B</h1>
</section>
<section data-auto-animate data-auto-animate-id="two" data-auto-animate-restart>
  <h1>Group C</h1>
</section>
<section data-auto-animate data-auto-animate-id="two">
  <h1 style="color: #EC4899;">Group C</h1>
</section>

イベント

autoanimate イベントは、2つの自動アニメーションスライド間を移動するたびにディスパッチされます。

Reveal.on('autoanimate', (event) => {
  // event.fromSlide, event.toSlide
});

例：コードブロック間のアニメーション

コードブロック間のアニメーションをサポートしています。コードブロックで data-line-numbers が有効になっており、すべてのブロックに一致する data-id 値があることを確認してください。

<section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
    ]
  </code></pre>
</section>
<section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let planets = [
      { name: 'mars', diameter: 6779 },
      { name: 'earth', diameter: 12742 },
      { name: 'jupiter', diameter: 139820 }
    ]
  </code></pre>
</section>
<section data-auto-animate>
  <pre data-id="code-animation"><code data-trim data-line-numbers>
    let circumferenceReducer = ( c, planet ) => {
      return c + planet.diameter * Math.PI;
    }

    let planets = [
      { name: 'mars', diameter: 6779 },
      { name: 'earth', diameter: 12742 },
      { name: 'jupiter', diameter: 139820 }
    ]

    let c = planets.reduce( circumferenceReducer, 0 )
  </code></pre>
</section>

        let planets = [
          { name: 'mars', diameter: 6779 },
        ]
      

        let planets = [
          { name: 'mars', diameter: 6779 },
          { name: 'earth', diameter: 12742 },
          { name: 'jupiter', diameter: 139820 }
        ]
      

        let circumferenceReducer = ( c, planet ) => {
          return c + planet.diameter * Math.PI;
        }
         
        let planets = [
          { name: 'mars', diameter: 6779 },
          { name: 'earth', diameter: 12742 },
          { name: 'jupiter', diameter: 139820 }
        ]
         
        let c = planets.reduce( circumferenceReducer, 0 )
      

例：リスト間のアニメーション

リスト項目を個別に照合して、新しい項目の追加または削除をアニメーション化できるようにします。

<section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Jupiter</li>
    <li>Mars</li>
  </ul>
</section>
<section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Earth</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Mars</li>
  </ul>
</section>

上級：状態属性

自動アニメーションに関係するさまざまな要素に状態属性を追加します。これらの属性は、たとえば、カスタム CSS を使用してアニメーションの動作を微調整する場合に関連付けることができます。

自動アニメーションが開始される直前に、表示されるスライド <section> に data-auto-animate="pending" を追加します。この時点で、次のスライドが表示され、すべてのアニメーション化された要素が開始位置に移動されています。次に、data-auto-animate="running" に切り替えて、要素が最終的なプロパティに向かってアニメーションを開始するタイミングを示します.

各個々の要素は、data-auto-animate-target 属性で装飾されています。属性の値は、この特定のアニメーションの一意の ID、またはこの要素が一致しないコンテンツとしてアニメーション化する必要がある場合は「unmatched」です。