Группа перехода Vue использует ввод / уход вместо перемещения - PullRequest
Новая
       15

Группа перехода Vue использует ввод / уход вместо перемещения

0 голосов
/ 02 июля 2019

Используя vue transition-groups , есть ли способ вызвать переходы отпуск + ввод вместо переходов перемещения для движущихся элементов?

Он должен уйти и вместо этого войти в новую позицию.Кажется, что переход перемещения работает только с преобразованиями.

Детская площадка: https://codepen.io/anon/pen/WqJEmV

HTML: 

<div id="flip-list-demo" class="demo">
  <button v-on:click="shuffle">Shuffle</button>
  <transition-group name="flip-list" tag="ul">
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
  </transition-group>
</div>

JS: 

new Vue({
  el: '#flip-list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9]
  },
  methods: {
    shuffle: function () {
      this.items = _.shuffle(this.items)
    }
  }
})

CSS: 

/** Should NOT use this: **/
.flip-list-move {
  transition: transform 1s;
}

/** Should use this instead: **/
.flip-list-enter-active, .flip-list-leave-active {
  transition: all 1s;
}

.flip-list-enter {
  opacity: 0;
  transform: translateX(80px);
}

.flip-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

1 Ответ

0 голосов
/ 03 июля 2019

Насколько я знаю:

  • Ввод срабатывает при добавлении нового элемента
  • Отпуск срабатывает при удалении элемента
  • Движение запускается при изменении порядка

Если вы хотите активировать ввод только для выхода из перехода, вам нужно будет добавить / удалить элемент из массива вместо случайного воспроизведения.

Вот пример: 

shuffle: function () {
    this.items = [1,3,5,7,9];
}
...