自动动画 4.0.0

¥Auto-Animate 4.0.0

reveal.js 可以自动为幻灯片中的元素添加动画效果。你只需将 data-auto-animate 添加到两个相邻的幻灯片 <section> 元素，自动动画就会为两者之间所有匹配的元素添加动画效果。

¥reveal.js can automatically animate elements across slides. All you need to do is add data-auto-animate to two adjacent slide <section> elements and Auto-Animate will animate all matching elements between the two.

以下是一个简单的示例，可以让你更好地了解如何使用它。

¥Here's a simple example to give you a better idea of how it can be used.

<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 等内容进行过渡。

¥This example uses the margin-top property to move the element but internally reveal.js will use a CSS transform to ensure smooth movement. This same approach to animation works with most animatable CSS properties meaning you can transition things like position, font-size, line-height, color, background-color, padding and margin.

移动动画

¥Movement Animations

动画效果不仅限于样式变化。自动动画功能还可用于在幻灯片中添加、删除或重新排列内容时，自动将元素移动到新位置。所有这些都无需一行内联 CSS。

¥Animations are not limited to changes in style. Auto-Animate can also be used to automatically move elements into their new position as content is added, removed or rearranged on a slide. All without a single line of inline CSS.

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

元素如何匹配

¥How Elements are Matched

当你在两张自动动画幻灯片之间导航时，我们会尽力自动在两张幻灯片中找到匹配的元素。对于文本，如果文本内容和节点类型相同，则视为匹配。对于图片、视频和 iframe，我们会比较 src 属性。我们还会考虑元素在 DOM 中的出现顺序。

¥When you navigate between two auto-animated slides we'll do our best to automatically find matching elements in the two slides. For text, we consider it a match if both the text contents and node type are identical. For images, videos and iframes we compare the src attribute. We also take into account the order in which the element appears in the DOM.

在无法自动匹配的情况下，你可以为想要动画的对象指定一个匹配的 data-id 属性。我们优先匹配 data-id 值，而不是自动匹配。

¥In situations where automatic matching is not feasible you can give the objects that you want to animate between a matching data-id attribute. We prioritize matching data-id values above our automatic matching.

以下示例为两个块指定了匹配的 ID，因为自动匹配没有内容可循。

¥Here's an example where we've given both blocks a matching ID since automatic matching has no content to go on.

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

动画设置

¥Animation Settings

你可以覆盖特定的动画设置，例如缓动和持续时间，可以覆盖整个演示文稿、每张幻灯片或每个动画元素的设置。以下配置属性可用于更改特定幻灯片或元素的设置：

¥You can override specific animation settings such as easing and duration either for the whole presentation, per-slide or individually for each animated element. The following configuration attributes can be used to change the settings for a specific slide or element:

如果你希望更改整个幻灯片组的默认设置，请使用以下配置选项：

¥If you'd like to change the defaults for the whole deck, use the following config options:

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

自动动画 ID 和重启

¥Auto-Animate Id & Restart

如果你希望将两组自动动画幻灯片并排放置，可以使用 data-auto-animate-id 和 data-auto-animate-restart 属性。

¥When you want separate groups of auto-animated slides right next to each other you can use the data-auto-animate-id and data-auto-animate-restart attributes.

使用 data-auto-animate-id，你可以为幻灯片指定任意 ID。只有当两张相邻的幻灯片具有相同的 ID 或两者都没有 ID 时，它们才会自动播放动画。

¥With data-auto-animate-id you can specify arbitrary ids for your slides. Two adjacent slides will only auto-animate if they have the same id or if both don't have one.

另一种控制自动动画的方法是使用 data-auto-animate-restart 属性。将此属性应用于幻灯片将阻止上一张幻灯片与它之间的自动动画（即使它们具有相同的 ID），但阻止它与下一张幻灯片之间的自动动画。

¥Another way to control auto-animate is the data-auto-animate-restart attribute. Applying this attribute to a slide will prevent auto-animate between the previous slide and it (even if they have the same id) but not between it and the next slide.

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

活动

¥Events

每次在两张自动动画幻灯片之间切换时，都会调度 autoanimate 事件。

¥The autoanimate event is dispatched each time you step between two auto-animated slides.

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

示例：代码块间动画

¥Example: Animating Between Code Blocks

我们支持代码块之间的动画。确保代码块已启用 data-line-numbers，并且所有代码块都具有匹配的 data-id 值。

¥We support animations between code blocks. Make sure that the code block has data-line-numbers enabled and that all blocks have a matching data-id value.

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

示例：列表间动画

¥Example: Animating Between Lists

我们单独匹配列表项，以便你可以为新项目的添加或删除添加动画。

¥We match list items individually to let you animate new items being added or removed.

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

高级：状态属性

¥Advanced: State Attributes

我们为自动动画中涉及的不同元素添加了状态属性。如果你想使用自定义 CSS 微调动画行为，可以绑定这些属性。

¥We add state attributes to the different elements involved in an auto-animation. These attributes can be tied into if you want to, for example, fine-tune the animation behavior with custom CSS.

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

¥Right before an auto-animation starts we add data-auto-animate="pending" to the slide <section> coming into view. At this point the upcoming slide is visible and all of the animated elements have been moved to their starting positions. Next we switch to data-auto-animate="running" to indicate when the elements start animating towards their final properties.

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

¥Each individual element is decorated with a data-auto-animate-target attribute. The value of the attribute is a unique ID for this particular animation OR "unmatched" if this element should animate as unmatched content.