How do I use transitions in Vue 3?

How do I use transitions in Vue 3?

In Vue 3, you can use the <transition> component to apply transitions to elements when they enter or leave the DOM. You can specify classes for different transition states.

Can you give me an example of a fade transition?

Sure! You can create a fade transition by using CSS classes like this:

<template>
  <transition name="fade">
    <div v-if="show">Hello, Vue 3!</div>
  </transition>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

What about using transitions with lists?

You can use transitions with lists by wrapping the list items in a <transition-group> component. This allows for more complex animations when items are added or removed.

Are there any built-in transition effects?

Yes, Vue 3 provides several built-in transition effects like 'fade', 'slide', and 'zoom'. You can also create custom transitions using your own CSS.