This article aims to help you use Vue's Transition feature, which creates a smooth display effect.

I will write it concisely, using what I believe to be the simplest method.

How to Use Vue's Transition

The following example shows a button that makes the text below fade out and fade in when pressed.

<template>
  <div class="container">
    <button @click="toggleModal">Change</button>
    <!-- Specifying an animation named fade -->
    <transition name="fade">
      <!-- Wrap the part that switches visibility with v-if or v-show in the transition tag -->
      <div v-if="modal">True</div>
    </transition>
  </div>
</template>

<script setup>
  import { ref } from "vue"
  const modal = ref(true)

  const toggleModal = () => {
    modal.value = !modal.value
  }
</script>

<style scoped>
  .container {
    margin: 100px;
    width: 100%;
  }

  /* Animation named fade */
  /* enter-active, etc. specify when the animation occurs */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.4s;
  }
  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
</style>

Explanation of the Implementation

Wrap Tags That Switch Visibility with v-if or v-show in the Transition Tag

<transition name="fade">
  <div v-if="modal">True</div>
</transition>

The tag with v-if or v-show must come directly under the transition tag.

It is acceptable for the tag to have additional nested tags, as long as v-if is directly under it.

<transition name="fade">
  <div v-if="modal">
    <div>`v-if` directly under it</div>
    <div>Additional tags are fine</div>
  </div>
</transition>

Specify the Name for the Transition

<transition name="fade">
  <div v-if="modal">True</div>
</transition>

In this case, it is written as name="fade", giving it the name fade.

Write the Animation Details in the Style

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.4s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

Since we attached the name fade, the class names become:

.fade-enter-active, .fade-leave-active, .fade-enter, .fade-leave-to.

The part after fade- specifies the timing of the animation and follows a naming convention defined in Vue's API.

Vue Built-in Components#Transition

In this case, it is written to fade out over 0.4 seconds.

Customize the Animation

Let's customize the animation.

You can find various ways to arrange the animation by searching Vue's official site or CSS animations.

.fade-leave-active {
  transform: translateX(100px);
  transition: all 0.4s ease;
}

By changing just the CSS, if you modify the code above, pressing the button will cause it to slide 100px to the right over 0.4 seconds and fade out.

In this way, you can fine-tune the animation just by adjusting the CSS.

Please give it a try!

When Transition Doesn't Work Properly

Are You Using v-for?

If you are using v-for, it will not work with Transition.

You should use the TransitionGroup component.

For more details, please refer to the following article.

⇨How to Transition When Adding to an Array in Vue

Are the CSS Class Names Linked to the Transition's Name?

In this example, I set it as name="fade".

The class names should be prefixed with fade- as specified by the name.

Additionally, the part after the prefix enter is a prop provided by Vue from the beginning, so you need to use the specified ones.

Vue Built-in Components#Transition

This concludes the article on how to use Vue's Transition.

I hope this helps someone out there.