# Transitions — Vue.js

Source: https://www.skillbyai.com/en/vue/s-transitions

> Animating enter, leave and list moves.

## Transition and TransitionGroup

The built-in `<Transition>` component animates a single element or component when it is inserted or removed by `v-if`, `v-show` or a dynamic component. Vue applies classes at each stage: `v-enter-from`, `v-enter-active`, `v-enter-to`, `v-leave-from`, `v-leave-active` and `v-leave-to`, where `v` is replaced by the `name` prop. You define the CSS transitions or animations; JavaScript hooks are also available. `mode="out-in"` waits for the old element to leave before the new one enters. `<TransitionGroup>` animates items in a `v-for` list, requires a unique `key` on each item, and adds a `v-move` class for items that change position.

## A fading panel and an animated list

Named transitions with CSS.

```vue
<script setup>
import { ref } from 'vue'

const open = ref(false)
const items = ref([1, 2, 3])
let next = 4
const add = () => items.value.splice(Math.floor(Math.random() * items.value.length), 0, next++)
const remove = (n) => { items.value = items.value.filter(i => i !== n) }
</script>

<template>
  <button @click="open = !open">Toggle</button>
  <Transition name="fade">
    <p v-if="open">Hello!</p>
  </Transition>

  <button @click="add">Add</button>
  <TransitionGroup name="list" tag="ul">
    <li v-for="n in items" :key="n" @click="remove(n)">{{ n }}</li>
  </TransitionGroup>
</template>

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

.list-move, .list-enter-active, .list-leave-active { transition: all 0.3s ease; }
.list-enter-from, .list-leave-to { opacity: 0; transform: translateX(20px); }
.list-leave-active { position: absolute; }
</style>
```

## Stage directions

Transition classes are stage directions: the actor (element) knows where to stand before entering, how to move while entering, and how to exit; Vue just calls the cues at the right time.

**Quiz:** Which classes define the starting state of an entering element and the end state of a leaving one with name="fade"?

- [x] fade-enter-from and fade-leave-to
- [ ] fade-in and fade-out
- [ ] fade-start and fade-end
- [ ] v-show-enter and v-show-leave

*Answer:* fade-enter-from and fade-leave-to. The name prop replaces the v- prefix.