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

再次检查源文档后，我意识到您无法在mode中使用<transition-group>道具。重新排列div之后，我可以使用<transition>让我使用mode。