What are some examples of transition components in Vue 3?

What are some examples of transition components in Vue 3?

In Vue 3, transition components allow you to apply transition effects when elements enter or leave the DOM. For example, you can use the <transition> component to wrap elements and apply CSS classes for entering and leaving transitions.

Can you show me a simple example of using a transition component?

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 other transition effects can I use?

You can create various effects like slide, zoom, or bounce by defining different CSS classes for the transitions. For instance, you can use transform properties to achieve slide effects.

Are there any built-in transition classes in Vue 3?

Yes, Vue 3 provides some built-in transition classes like v-enter, v-enter-active, v-leave, and v-leave-active that you can use to create custom transitions easily.