VueJS 2 - 模式不适用于呈现的v-for列表

Question

我试图在v-for呈现列表上使用<transition>标记，它主要工作，但mode='out-in'不起作用。列表中有10个项目。

该转换将起作用，但在第一个元素完成转换之前加载第二个元素。

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

而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

再次检查源文件后，我意识到，你不能在<transition-group>使用mode道具。重新排列div后​​，我可以使用<transition>，它让我使用mode。