Как я могу использовать переход на отдельные элементы списка в Vue.js?

Question

Мое понимание переходов в vue.js заключается в том, что вы используете <transition>анимировать между отдельными элементами и <transition-group> оживить весь список.

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

<span v-for="item in items">
  <transition>

    <div>
        Transition from this...
    </div>

    <div>
         ...to this.
    </div>

  </transition>
</span>

Тем не менее, когда я делаю это изменение, анимация не работает. Это ожидаемое поведение?

Обновление: после некоторой обработки я обнаружил, что моя первоначальная гипотеза была верна. Я просто делал что-то еще не так. Но это стоит отметить для всех, кто сталкивается с этой проблемой.

Ты можешь использовать <transition> внутри списка, если вы хотите анимировать отдельные компоненты списка.

Answer 1

Вы используете группы переходов для одинакового перехода всех детей. Кроме того, попробуйте установить группу переходов до v-for

new Vue({
  el: "#app",
  data: {
    items : [
      {message: 'sometext', id: 1},
      {message: 'sometext', id: 2},
      {message: 'sometext', id: 3}
     ],
     id : 3
  },
  methods: {
    addItem(){
            this.id++
            this.items.push({message: 'sometext', id: this.id});
        },
     enter(){
         console.log('transition enter called');
     }
  }
})

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div id="container">
        <button @click="addItem()">Add Item</button>
        <transition-group :name="'fade'" v-on:enter="enter">
            <span v-for="item in items" v-bind:key="item.id">
               {{item.message}}
            </span>
        </transition-group>
    </div>
</div>

Answer 2

Я не совсем уверен, что вы пытаетесь сделать со своим примером.

Если вы хотите перенести список

  <transition-group name="fade" tag="span">
    <div v-for="item in items" v-bind:key="item">
      {{ item }}
    </div>
  </transition-group>

Если вы хотите перейти между двумя пунктами.

  <transition name="fade">
    <div v-show="whatever === true">
      Transition from this...
    </div>
  </transition>
  <transition name="fade">
    <div v-show="whatever === false">
     ...to this.
    </div>
  </transition>