Vue. Как анимировать смену контента по хуку updated?

Question

[Павел Корнилов]

Здравствуйте!
Только что изучил спеку по transition, но не нашёл ни одного примера анимирования смены контента внутри компонента. Контент меняется по хуку updated - по ajax перерисовывается html, компонент - статический.

Answer 1

[0xD34F]

При чём тут updated, я честно говоря не очень понял.

Оборачиваете свой контент в transition, вешаете key. Например.

Comments

[Павел Корнилов]

При том, что структура компонента такая:

var mainContent = Vue.component('main-content',  {
	data() {
		return {
			store: response, // Сюда приходит ответ ajax
		}
	},


	updated() {
		// контент ужо другой
	},

	template: `
	<transition name="fade" mode="out-in">
	<main
		:class=""
		v-html="store.parsedPage.html"
	>
	</main>
	</transition>
	`
}); // main-content