vueJS List Transition not activating

Question

I have a scenario in a Vue JS App where I have a list of items which randomly change order after having the user presses a button. I can get the list elements to dynamically change their position with Vue.set however when I add a list transition via the <transition-group> tag the change remains, well, transition-less, and I don't know why.

I am displaying my list of items using the v-for attribute like so:

<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>

The key card.u_id is a unique key for each element. I have also defined the css style "shuffle-move" with the following rule:

shuffle-move{
  transition: all 1s;
}

Additionally I am updating the position using a shuffle method in my Vue instance which looks like so:

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);
    }
}

I am using Vue 2.

Where am I going wrong?

Answer 1

You are missing a dot in your css rule:

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

Live example of your code : https://codepen.io/hans-felix/pen/oNXqbKE