How can I implement CSS transitions in Vue.js?

How can I implement CSS transitions in Vue.js?

You can use the <transition> component in Vue.js to apply CSS transitions to elements when they 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 customize the transition duration?

You can customize the duration by changing the transition property in your CSS. For example, adjust transition: opacity 1s; for a 1-second duration.

Are there any other transition effects I can use?

Yes! You can create various effects like slide, zoom, or rotate by modifying the CSS properties in your transition classes.