Question

我试图按照示例尝试让vue transition-group错开工作：https://vuejs.org/v2/guide/transitions.html#Staggering-List-Transitions

具体来说，我没有看到转换发生在加载上。在我的codepen（下面）中，添加按钮可以正常工作，并且对于添加到列表但又不会加载的新项目会发生淡入淡出。

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

的appear添加<transition-group>属性

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

以下是您在加载时的工作转换的codepen

过渡组错开不起作用（Vue 2）

1 个答案: