How do I use transition classes in Vue CLI?

How do I use transition classes in Vue CLI?

You can use transition classes in Vue CLI by utilizing the <transition> component. This allows you to apply CSS transitions when elements enter or leave the DOM.

Can you show me an example of how to implement it?

Sure! Here’s a simple example:

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

<script>
export default {
  data() {
    return { show: true };
  }
};
</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 transition duration by adjusting the transition property in your CSS. For example, change transition: opacity 0.5s; to transition: opacity 1s; for a longer duration.

Are there any built-in transition classes I can use?

Yes, Vue provides some built-in transition classes like fade, slide, and zoom. You can use these by simply applying the corresponding class names in your CSS.