vueJS 列表转换未激活

Question

我在 Vue JS 应用程序中有一个场景，其中有一个项目列表，在用户按下按钮后随机更改顺序。我可以使用 Vue.set 让列表元素动态更改它们的位置，但是当我通过 <transition-group> 标记添加列表转换时，更改仍然存在，没有转换，我不知道为什么。

我正在使用 v-for 属性显示我的项目列表，如下所示：

<transition-group name="shuffle" tag="ul">
    <li class="content column" v-for="card in notecards" v-bind:key="card.u_id">
        <div v-bind:key="card.u_id" v-on:click="card.show=!card.show">
            <transition mode="out-in" name="flip">
                <span v-bind:key="card.term" v-if="card.show" class="card-pad box card card-content media">
                    <div class="media-content has-text-centered">
                        <strong>{{card.term}}</strong>
                    </div>
                </span>
                <span v-bind:key="card.def" v-else class="card card-content box media">
                    <div class="media-content has-text-centered">
                        <strong>{{card.def}}</strong>
                    </div>
                </span>
            </transition>
        </div>
    </li>
</transition-group>

键card.u_id是每个元素的唯一键。我还使用以下规则定义了 css 样式 "shuffle-move"：

shuffle-move{
  transition: all 1s;
}

此外，我在我的 Vue 实例中使用 shuffle 方法更新位置，如下所示：

shuffle_cards: function() {
    let entries = this.notecards.length;
    while (entries){
        let random_index = Math.floor(Math.random() * entries--);
        let intermediate = this.notecards[random_index];
        Vue.set(this.notecards, random_index, this.notecards[entries]);
        Vue.set(this.notecards, entries, intermediate);
    }
}

我正在使用 Vue 2。

我哪里错了？

Answer 1

您的 css 规则中缺少一个点：

.shuffle-move{
  transition: all 1s;
}

您的代码实例：https://codepen.io/hans-felix/pen/oNXqbKE

vueJS 列表转换未激活

vueJS List Transition not activating

javascript

transition

vue.js

vuejs2