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