Animate Element Visibility with Vue 3 Transition Component

<template>
  <div>
    <button @click="show = !show">Toggle Message</button>

    <!-- Basic Fade Transition -->
    <Transition name="fade">
      <p v-if="show" class="message">Hello Vue 3!</p>
    </Transition>

    <!-- Slide Transition with Custom CSS Classes -->
    <Transition
      name="slide"
      enter-active-class="animate__animated animate__slideInLeft"
      leave-active-class="animate__animated animate__slideOutRight"
    >
      <div v-if="show" class="box">
        This box slides in and out!
      </div>
    </Transition>

    <button @click="showMultiple = !showMultiple">Toggle Multiple Boxes</button>
    <TransitionGroup name="list" tag="ul">
      <li v-for="item in displayedItems" :key="item.id" class="list-item">
        {{ item.text }}
      </li>
    </TransitionGroup>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
// You would typically import animate.css in your main.js or index.html
// For demonstration, assume animate.css is linked
// <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

const show = ref(true);
const showMultiple = ref(true);

const items = ref([
  { id: 1, text: 'Item One' },
  { id: 2, text: 'Item Two' },
  { id: 3, text: 'Item Three' }
]);

const displayedItems = computed(() => showMultiple.value ? items.value : []);
</script>

<style>
/* CSS for 'fade' transition */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* Basic styles for the slide box */
.box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-top: 20px;
}

/* CSS for 'list' transition group items */
.list-item {
  transition: all 0.5s ease;
  display: block;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
}

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

/* Ensure leaving items take up space during transition */
.list-leave-active {
  position: absolute; /* or `width: 100%` if inside a flex container */
}
</style>