How can I implement transition animations in Vue.js?

How can I implement transition animations in Vue.js?

You can use the <transition> component in Vue.js to create transition animations. Just wrap your elements with it!

Can you show me a simple example?

Sure! Here's a basic 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 add a slide effect instead?

You can change the CSS classes in the <style> section to create a slide effect. Just adjust the transform properties!

Are there any built-in transition effects in Vue?

Yes, Vue provides several built-in transition classes like fade, slide-fade, and more. You can use them directly!