jquery - 过渡组交错不起作用(Vue 2)

Question

我正在尝试让 vue 过渡组交错按照示例工作:https://v2.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

添加appear归因于您的<transition-group>对于 transitions on initial render

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

这是codepen负载下的工作转换