HTML
Smooth UI Animations with Vue 3 Transitions
Create elegant entrance and exit animations for elements with Vue 3's built-in `<Transition>` component, enhancing user experience and visual appeal.
<template>
<div>
<button @click="show = !show">Toggle Element</button>
<Transition name="fade">
<p v-if="show">Hello, I am a transitioning element!</p>
</Transition>
</div>
</template>
<script setup>
import { ref } from 'vue';
const show = ref(true);
</script>
<style>
/* Define CSS transitions for the '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 example uses Vue 3's `<Transition>` component to animate the appearance and disappearance of an element. By wrapping an element with `<Transition>` and binding its `v-if` or `v-show` directive, Vue automatically applies CSS classes (`-enter-from`, `-enter-active`, `-leave-to`, etc.) during the transition process. These classes can then be targeted with CSS to define custom animations, in this case, a simple fade effect.