<AnimationGroup>

The AnimationGroup component manages and coordinates animations within a group of elements. It triggers animations on child elements that have the :animate directive when the group’s content is re-ordered.

AnimationGroup doesn’t render an extra DOM element, or show up in the inspected component hierarchy.

<AnimationGroup>
  <For each={list()}>{(item) => <li use:animate={flip}>{item}</li>}</For>
</AnimationGroup>