How can I implement transitions in Vue.js?

How can I implement transitions in Vue.js?

You can implement transitions in Vue.js using the <transition> component. It allows you to apply transition effects when elements enter or leave the DOM.

Can you show me a simple example?

Sure! Here's a basic example:

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition name="fade">
      <p v-if="show">Hello, Vue!</p>
    </transition>
  </div>
</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 if I want to use different transition effects?

You can create custom transition effects by defining different CSS classes for the transition states. Just change the class names in the <transition> component.