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>

密钥卡.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