How to assign a variable to the transition name in Vue?

Question

Animation

There is a piece of the component:

<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>

And a piece of script, more precisely data:

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

How can I dynamically change the name of the transition depending on, for example, currentPageNumber? In fact, I made it so that, depending on the transition through the vue-router, the active li was given the active class. But I also need one of 2 options for animating the .bar element, depending on which page was the previous one and which page is currently active. Those. we pass from the 3rd page to the 2nd, the transition is given the name "bottom-center-in", if from the 1st to the 2nd, then "top-center-in".

Answer 1

There are off. dock here