トランジション・グループ（ヴュー2）動作していないずらす

Question

私は例ごとに動作するようにVUEの遷移グループのふらつきを取得しようとしている：https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions

は、具体的に、私は遷移が負荷に起こる見ていません。私のコードパッド（下）では、追加ボタンが機能し、新しいアイテムがリストに追加されたときにフェードが発生しますが、再度ロードされません。

https://codepen.io/robomatic/pen/RgLzJP

new Vue({ 
    el: "#app", 
    data() { 
    return { 
     adding: false, 
     page: { 
     mediaGallery: [{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      },{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      },{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      },{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      },{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      },{ 
      sys: {id: "3Dke2aizfqEo4eWOyoe2Uk"}, 
      fields: {file: {url: "//via.placeholder.com/800x600g"}} 
      }] 
     } 
    }; 
    }, 
    methods: { 
    delayedBy: function(el) { 
     if (this.adding) 
     return 0 
     return 350 
    }, 
    beforeEnter: function(el) { 
     console.log("beforeEnter"); 
     el.style.opacity = 0; 
    }, 
    enter: function(el, done) { 
     console.log("enter"); 
     let delay = el.dataset.index * this.delayedBy(); 
     setTimeout(function() { 
     $(el).animate({ opacity: 1 }, 300, done); 
     }, delay); 
    }, 
    leave: function(el, done) { 
     console.log("leave"); 
     let delay = el.dataset.index * this.delayedBy(); 
     setTimeout(function() { 
     $(el).animate({ opacity: 0 }, 300, done); 
     }, delay); 
    }, 
    addItem() { 
     let item = { 
     sys: {id: Math.random().toString().substring(2)}, 
     fields: {file: {url: "//via.placeholder.com/800x600"}} 
     } 
     this.adding = true; 
     this.page.mediaGallery.push(item) 
    } 
    } 
}); 

Answer 1

ここtransitions on initial render

<transition-group appear></transition-group> 

のためにあなたの<transition-group>にappear属性を追加し、負荷