What are some examples of transitions in Vue.js?

What are some examples of transitions in Vue.js?

Vue.js provides several built-in transition classes that you can use to create smooth animations when elements enter or leave the DOM. For example, you can use the v-enter and v-leave classes to define the styles for entering and leaving transitions.

Can you show me a simple example of a fade transition?

Sure! Here's a simple example:

<template>
  <transition name="fade">
    <div v-if="show">Hello, Vue.js!</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 about slide transitions?

For slide transitions, you can use similar classes. Here's an example:

<template>
  <transition name="slide">
    <div v-if="show">Sliding in and out!</div>
  </transition>
  <button @click="show = !show">Toggle</button>
</template>

<style>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s;
}
.slide-enter {
  transform: translateY(-100%);
}
.slide-leave-to {
  transform: translateY(100%);
}
</style>

Can I customize the transition duration?

Yes, you can customize the duration by changing the transition property in your CSS. For example, you can set it to 1s for a longer transition.