Why is transition animation not working for 1 element in vue.js?

Question

Vue.js

I did everything according to this documentation, the transition does not work :(
I also made the transition a separate element, it did not help either. What is the reason?
Here is the code and a link to the sandbox: https://codepen.io/qpz_here/pen/vRqVYY

<div id="app">
  <button v-on:click="show = !show">Анимация</button>
  <section v-if="show" transition="fade"></section>
</div>

section {
  width: 300px;
  height: 300px;
  background: #007aff;
}
button {
  padding: 20px 10px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

new Vue ({
  el: '#app',
  data: {
  show: true,
  }
})

Thanks in advance!

Answer 1

I did everything according to this documentation ...

<section v-if="show" transition="fade"></section>

Not all. The element being animated must be placed in a transition - it's a component, not an attribute at all. It will be correct like this:

<transition name="fade">
  <section v-if="show"></section>
</transition>

Or, if using the pug syntax:

transition(name="fade")
  section(v-if="show")