JAVASCRIPT
Vue 3 Element Transitions with <Transition>
Animate elements entering and leaving the DOM in Vue 3 using the built-in `<Transition>` component. This snippet shows a basic fade transition example.
// src/App.vue
<template>
<div>
<button @click="show = !show">Toggle Element</button>
<Transition name="fade">
<p v-if="show">Hello Vue 3!</p>
</Transition>
</div>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(true);
</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;
}
</style>
How it works: This snippet showcases the Vue 3 `<Transition>` component for animating the entrance and exit of an element in the DOM. By wrapping an element with `<Transition>` and defining CSS classes (e.g., `fade-enter-active`, `fade-leave-active`, `fade-enter-from`, `fade-leave-to`), you can create smooth visual effects like a fade-in/fade-out when the element's `v-if` or `v-show` condition changes.