过渡组错开不工作（Vue公司2）

Question

我试图让VUE过渡组每错开的例子的工作：https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions

具体我没有看到有负载时的转换发生。在我的codepen（下面）中，添加按钮的作品和淡入淡出发生的新项目添加到列表中，但又没有加载。

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

添加appear属性您<transition-group>为transitions on initial render

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

这是你的工作转型对负载codepen