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

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

0 голосов
/ 06 января 2019

Мое понимание переходов в 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> внутри списка, если вы хотите анимировать отдельные компоненты списка.

Ответы [ 2 ]

0 голосов
/ 06 января 2019

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

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

  <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>
0 голосов
/ 06 января 2019

Вы используете переходные группы для одинакового перехода всех детей. Кроме того, попробуйте установить группу перехода до вашего 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>
...