What are some advanced transition examples in Vue 3?

Can you show me some advanced transition examples in Vue 3?

Sure! Vue 3 offers powerful transition features. Would you like to see examples with CSS animations or JavaScript hooks?

I'd love to see examples with CSS animations!

Great! You can use the <transition> component with CSS classes. For example, you can define enter and leave classes to create smooth transitions. Here's a simple example:

<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>

That looks awesome! Can I customize the transition duration?

Absolutely! You can adjust the duration by changing the transition property in your CSS. Just modify the 0.5s to your desired time.