How do I use the transition component in Vue 3?

How do I use the transition component in Vue 3?

In Vue 3, the transition component allows you to apply transition effects when elements enter or leave the DOM. You can wrap your elements with the <transition> tag.

Can you show me a simple example?

Sure! Here's a basic example:

<template>
  <button @click="show = !show">Toggle</button>
  <transition name="fade">
    <p v-if="show">Hello, Vue 3!</p>
  </transition>
</template>
<script>
export default {
  data() {
    return { show: false };
  }
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

What if I want to customize the transition effects?

You can customize the transition effects by defining your own CSS classes for the different transition states, like fade-enter-active, fade-leave-active, etc. Just modify the styles to achieve the desired effect.

Are there any built-in transition effects?

Yes, Vue provides some built-in transition classes like fade, slide-fade, and zoom. You can use these by simply adding the class name to the name attribute of the <transition> component.