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

Question

Используя 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);
}

Answer 1

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

Решение, которое сработало для меня, - использовать keyатрибут, чтобы заставить vue обрабатывать перемещенный элемент как "новый". Таким образом, анимация входа / выхода запускается вместо движения.

Я раздвоил вашу ручку, чтобы показать, как она может работать: https://codepen.io/josh7weaver/pen/eYOXxed?editors=1010

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

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

Надеюсь, это поможет!

Answer 2

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

• Enter срабатывает при добавлении нового элемента
• Отпуск срабатывает при удалении предмета
• Перемещение запускается при изменении порядка

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

Вот пример:

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