transition item in array entering and leaving DOM

 const activities = [
    {
      title: "Stalk",
      location: "Outside",
      tags: ["exercise", "patience", "skill"],
      background: "https://placecats.com/300/200",
    },
    {
      title: "Kill",
      location: "Anywhere",
      tags: ["Claws", "Teeth", "Fulfillment"],
      background: "https://placecats.com/300/300",
    },
    {
      title: "Sleep",
      location: "Bed",
      tags: ["23/7", "Rest", "The Best"],
      background: "https://placecats.com/300/301",
    },
  ];

 <For each={activities}>
      {(activity, index) => (
        <Show when={index() === viewIndex()}>
          <section class={`${styles.section}`}>
            <img
              class={`${styles.background}`}
              src={activity.background}
              alt="no"
            />

            <p>
              {index() + 1} --- {activities.length}
            </p>

            <article>
              <header>
                <h3 class={`${styles.location}`}>{activity.location}</h3>
                <h2 class={`${styles.title}`}>{activity.title}</h2>
              </header>

              <ul class={`${styles.list}`}>
                <For each={activity.tags}>
                  {(tag) => <li class={`${styles.listItem}`}>{tag}</li>}
                </For>
              </ul>
            </article>

            <nav>
              <button onClick={previous} aria-label="Previous Activity">
                Left
              </button>
              <button onClick={next} aria-label="Next Activity">
                Right
              </button>
            </nav>
          </section>
        </Show>
      )}
    </For>