Как во Vue присваивать переменную в название transition?

Question

[ERomulon]

Есть кусок компонента:

<div>
			<ul class="page_indicator">
				<li class="indicator1" :class="{active: currentPageNumber == '1'}"><transition :class="{bar_animate_in: currentPageNumber == '1'}"><div class="bar"></div></transition></li>
				<li class="indicator2" :class="{active: currentPageNumber == '2'}"><div class="bar"></div></li>
				<li class="indicator3" :class="{active: currentPageNumber == '3'}"><div class="bar"></div></li>
				<li class="indicator4" :class="{active: currentPageNumber == '4'}"><div class="bar"></div></li>
			</ul>
		</div>

И кусок скрипта, точнее data:

data(){
			return{
				pages: ['1', '2', '3', '4'],
				pagesHistory: ['1'],
				previousPageNumber: '',
				currentPageNumber: '',
				routeAnimation1: ''
			}
		}

Как мне менять динамически название transition в зависимости от к примеру currentPageNumber? По сути я сделал так, чтобы в зависимости от переходу по vue-router активному li давался класс active. Но мне еще нужно, чтобы в зависимости от того, какая страница была предыдущей и какая страница активна сейчас давалась одна из 2х вариантов анимации элемента .bar. Т.е. переходим с 3й страницы на 2ю, transition дается название "bottom-center-in", если с 1й на 2ю, то "top-center-in".

Answer 1

[Владислав Нагорный]

Есть в офф. доке тут

Comments

[ERomulon]

А вы не могли бы просто привести пример? Как именно засунуть переменную в названия transition и управлять им из data.