Vue Transitions and Animations

ENTER lifecycle:
1. .v-enter-from   → Start state (opacity: 0)
2. .v-enter-active → Transition rule applied
3. .v-enter-to     → End state (opacity: 1)

LEAVE lifecycle:
1. .v-leave-from   → Start state (opacity: 1)
2. .v-leave-active → Transition rule applied
3. .v-leave-to     → End state (opacity: 0)

<script setup>
import { ref } from &#039;vue'
const show = ref(true)
const tab = ref(&#039;a')
</script>

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

  <Transition name="fade">
    <p v-if="show">I fade in/out</p>
  </Transition>

  <!-- mode="out-in": leave first, then enter -->
  <Transition name="slide" mode="out-in">
    <div v-if="tab === &#039;a'" key="a">Tab A</div>
    <div v-else key="b">Tab B</div>
  </Transition>

  <!-- appear: animate on initial render -->
  <Transition name="fade" appear>
    <p>Animates on page load!</p>
  </Transition>
</template>

<style>
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }

.slide-enter-active, .slide-leave-active { transition: all 0.35s ease; }
.slide-enter-from { opacity: 0; transform: translateX(-20px); }
.slide-leave-to { opacity: 0; transform: translateX(20px); }
</style>

<script setup>
import { ref } from &#039;vue'
const items = ref([
  { id: 1, text: &#039;Learn Vue' },
  { id: 2, text: &#039;Build projects' },
])
let nextId = 3

function add() { items.value.push({ id: nextId++, text: `Item ${nextId - 1}` }) }
function remove(id) { items.value = items.value.filter(i => i.id !== id) }
function shuffle() { items.value = [...items.value].sort(() => Math.random() - 0.5) }
</script>

<template>
  <button @click="add">Add</button>
  <button @click="shuffle">Shuffle</button>

  <TransitionGroup name="list" tag="ul">
    <li v-for="item in items" :key="item.id">
      {{ item.text }}
      <button @click="remove(item.id)">✕</button>
    </li>
  </TransitionGroup>
</template>

<style>
.list-enter-active, .list-leave-active { transition: all 0.4s ease; }
.list-enter-from { opacity: 0; transform: translateX(-30px); }
.list-leave-to { opacity: 0; transform: translateX(30px); }
.list-move { transition: transform 0.4s ease; }
.list-leave-active { position: absolute; } /* prevents layout jump */
</style>