How to set a Vue component change animation?

Question

Vue.js

<template>
  <BoardAdminMenu
    @action="changeActiveIndex"
  />

  <div class="board">
    <PersonalArea v-if="activeIndex === 0" />
    <CreateLetter v-if="activeIndex === 1" />
  </div>

</template>

The block appears depending on the selected button in the menu.
How to simulate a delay before a condition in the form of a page break?

Answer 1

There is a convenient transitions mechanism - Animations on Vue