自动动画 4.0.0

reveal.js 可以自动为各个幻灯片的元素添加动画。您只需为两个相邻的幻灯片 <section> 元素添加 data-auto-animate，自动动画功能就会为这两个幻灯片之间的所有匹配元素添加动画。

下面是一个简单的示例，可以帮助您更好地了解如何使用此功能。

<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。

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

匹配元素的方法

在两个自动动画的幻灯片之间导航时，我们会尽力自动查找两个幻灯片中的匹配元素。对于文本，当文本内容和节点类型相同，则视为匹配。对于图像、视频和 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。两个相邻的幻灯片只有在具有相同的 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事件。

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 微调动画行为。

在自动动画开始之前，我们将 data-auto-animate="pending" 添加到可视化的幻灯片<section>中。此时，即将到来的幻灯片可见，并且所有动画元素都已移至其起始位置。接下来，我们将切换到 data-auto-animate="running"，以指示元素何时开始朝向其最终属性进行动画。

每个单独的元素都装饰有 data-auto-animate-target 属性。该属性的值是此特定动画的唯一 ID，或者如果该元素应作为不匹配的内容进行动画，则为“unmatched”。