VueJS 2 - Modus funktioniert nicht auf gerenderten v-für Liste

Question

Ich versuche, das <transition> Tag auf einer V-Rendered-Liste zu verwenden, und es funktioniert meistens, außer mode='out-in' funktioniert nicht. Es gibt 10 Artikel in der Liste.

Der Übergang funktioniert, aber es lädt das zweite Element, bevor der erste seinen Übergang beendet hat.

div(v-for='(q, key, index) in questions') 
    transition-group(
     v-bind:name='transChg' 
     mode='out-in' 
     tag='p' 
    ) 

    div.question.col-xs-12(v-if='question == index' key='q') 
     div 
      | Question {{ question + 1 }} 
      hr 

      div.quest-text 
      | {{ q.questText }} 

       div.row.text-center 
        div.col-xs-6.answer-outer 
         div.answer-tile(
          @click='[selectAns(0),selAns = q.answersText[0].Movie]' 
          v-bind:class='{ selectedAns1: question0 }' 
          ) 
           | {{ q.answersText[0].Answer }} 

Und die CSS

.drop-in-enter-active { 
    transition: all 3s ease; 
} 

.drop-in-leave-active { 
    transition: all 5s cubic-bezier(1.0, 0.5, 0.8, 1.0); 
} 

.drop-in-enter, .drop-in-leave-to { 
    transform: translateY(150px); 
    opacity: 0; 
} 

Answer 1

Nachdem die Quelldokumente Überprüfung wieder, erkannte ich, dass Sie nicht die mode Stütze in <transition-group> verwenden können. Nachdem ich die Divs umgeordnet hatte, konnte ich <transition> verwenden, was mich mode verwenden ließ.