Animating Element Entry/Leave with Vue 3 Transitions

// App.vue
<template>
  <button @click="show = !show">Toggle Element</button>
  <Transition name="fade">
    <p v-if="show">Hello Vue!</p>
  </Transition>

  <hr>

  <button @click="addItem">Add Item</button>
  <button @click="shuffleItems">Shuffle Items</button>
  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
      <button @click="removeItem(item.id)">X</button>
    </li>
  </TransitionGroup>
</template>

<script setup>
import { ref } from 'vue';
import { shuffle } from 'lodash'; // Using lodash for shuffling for demo

const show = ref(true);

let nextId = 4;
const items = ref([
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
]);

const addItem = () => {
  const newItem = { id: nextId++, text: `Item ${nextId - 1}` };
  const randomIndex = Math.floor(Math.random() * (items.value.length + 1));
  items.value.splice(randomIndex, 0, newItem);
};

const removeItem = (id) => {
  items.value = items.value.filter(item => item.id !== id);
};

const shuffleItems = () => {
  items.value = shuffle(items.value); // Requires 'lodash' or similar utility
};
</script>

<style>
/* Transition for a single element */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Transition group for lists */
.list-move, /* apply transition to moving elements */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}

.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* ensure leaving items are taken out of layout flow so that moving
   animations can be calculated correctly. */
.list-leave-active {
  position: absolute;
}

ul { list-style: none; padding: 0; }
li {
  margin-top: 10px;
  padding: 10px;
  background-color: #f0f0f0;
  border-left: 5px solid #42b983;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
li button { background-color: #ff4d4d; color: white; border: none; padding: 5px 8px; cursor: pointer; }
</style>