How can I implement transitions in Vue 3?

How can I implement transitions in Vue 3?

In Vue 3, you can use the <transition> component to apply transitions to elements. You wrap the element you want to animate with the <transition> tag.

Can you show me a simple example?

Sure! Here's a basic example:

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

<script>
export default {
  data() {
    return { show: true };
  }
};
</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 use multiple transitions?

You can define multiple transition classes and use them conditionally based on your component's state. Just ensure each transition has its own unique name.

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.