Where is the error when animating the appearance in vue.js?

Question

Vue.js

Guys, where am I wrong when aminating through transition? When this block (modal) is closed, it works, but when it appears, it doesn't.
At first, this block is hidden, I think that’s why it doesn’t work out, and when it closes, it sees it correctly.
Thanks for the help!

<template>
  <transition name="bird_modal">
   // тут что-то
  </transition>
</template>

.bird_modal-enter-active {
  transition: all .2s;
  opacity: 1;
}
.bird_modal-leave-to {
  opacity: 0;
}

Answer 1

To solve this problem, you need to add to appear, like this: Because: I have an initial render in progress and I took a closer look at the docks, I would see " If you also want to apply a transition on the initial render of a node, you can add the attribute"