How do I use transitions in Vue.js?

How do I use transitions in Vue.js?

In Vue.js, you can use the <transition> component to apply transitions to elements when they enter or leave the DOM.

Can you give me an example of a simple fade transition?

Sure! You can create a fade transition like this:

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

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

What other types of transitions can I use?

You can use various CSS transitions like slide, zoom, or custom animations. Just define the appropriate CSS classes!

Is it possible to use JavaScript for transitions?

Yes, you can use JavaScript hooks in Vue transitions to control the transition process programmatically.