transition item in array entering and leaving DOM
I've been trying to setup a sandbox for a couple hours but no luck. Anyways I'm not having any luck with getting a item in an array that's conditionally rendered to transition in and out.
There is an array of items.
There is an array of items.
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",
},
]; 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> <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>
