vueJS Список переходов не активируется - PullRequest
Новая
       19

vueJS Список переходов не активируется

3 голосов
/ 12 марта 2020

У меня есть сценарий в приложении 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 - это уникальный ключ для каждого элемента. Я также определил стиль "1019 *" "shuffle-move" со следующим правилом: 

shuffle-move{
  transition: all 1s;
}

Кроме того, я обновляю позицию, используя метод shuffle в моем экземпляре Vue, который выглядит так: 

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.

Где я иду не так?

1 Ответ

1 голос
/ 13 марта 2020

В вашем правиле css отсутствует точка: 

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

Пример вашего кода в реальном времени: https://codepen.io/hans-felix/pen/oNXqbKE

...