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 prop 是不能使用的。重新排列 div 后，我可以使用 <transition>，这让我可以使用 mode.

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

VueJS 2 - Mode not working on rendered v-for list

vuejs2