What are the basics of transitions in Vue 3?

What are the basics of transitions in Vue 3?

In Vue 3, transitions allow you to apply animations when elements enter or leave the DOM. You can use the <transition> component to wrap elements.

Can you show me a simple example of how to use it?

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 transition states. Just customize the styles!

Are there any built-in transition classes in Vue?

Yes, Vue provides some built-in transition classes like v-enter, v-leave, and you can also use libraries like Animate.css for more effects.