Почему не работает анимация перехода для 1 элемента в vue.js?

Question

[Дима]

Все делал по этой документации, переход не срабатывает :(

Также делал transition отдельным элементом, это тоже не помогло. В чем причина?

Вот код и ссылка на песочницу: 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,
	}
})

Заранее спасибо!

Answer 1

[0xD34F]

Все делал по этой документации...

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

Не всё. Анимируемый элемент надо помещать в transition - это компонент, а вовсе не атрибут. Правильно будет так:

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

Или, если использовать синтаксис pug:

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

Comments

[Дима]

делал и так и так, когда создавал элементом, инспектор кода его вообще не видел в разметке, возможно была проблема из-за pug. Спасибо!