将过渡应用于 v-for 中的组件

Question

我一直在尝试在通过 v-for 渲染的卡片中模拟类似轮播的效果。我有一个数据数组，我有一个左旋转该数组的方法。我在 v-for 中传递了那个旋转的数组。但是，旋转的数组移动了真实的 dom div，而不是在 v-for 中重新渲染组件（我认为这就是 Vue 优化的行为方式）。我试过transition-group，但它只适用于离开和进入div的转换。有什么方法可以让我使用 Vue 转换获得类似轮播的效果（div 向上移动）？当我编写代码时，div 向上移动并按预期运行，因为当时 div 并没有在 real dom 中移动，只有 div 内的数据在发生变化，但后来它开始表现得像这样（div 在现实中移动dom)

这里是小提琴链接：https://jsfiddle.net/aanish/7pe5jq9u/4/

请帮助我实现预期的行为。

var Box =  {
  props: ['achievement'],
    template: '<transition name="slide-up"><div class="box" :key="achievement">{{achievement}}</div></transition>',
};

new Vue({
    el: '#app',
    data: {
    achievements: ['Title1', 'Title2', 'Title3', 'Title4']
  },
  created() {
    this.autoRotateArr();
  },
  components: {
    'box': Box
  },
  methods: {
    leftRotateArr() {
        this.achievements.push(
          this.achievements.shift()
    )},
    autoRotateArr() {
      this.interval = setInterval(() => this.leftRotateArr(), 3000);
    }
  }
})

.box-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 50px;
}

.box {
  height: 50px;
  background-color: orange;
  margin: 10px 0;
}

.slide-up-enter-active {
  transition: all 666ms cubic-bezier(0, 0, 1, 1);
}

.slide-up-enter {
  transform: translateY(50px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div class="hero">
    <box :achievement="achievements[0]"></box>
  </div>
  <div class="box-wrapper">
     <div><button @click="leftRotateArr">Up</button></div>
      <box v-for="achievement in achievements" :achievement="achievement" :key="achievement"></box>
  </div>
  
</div>

.

Answer 1

也许有mode="out-in" 和transition name 和transition-group 的列表，请检查sn-p：

var Box =  {
  props: ['achievement'],
    template: '<transition-group name="slide-up" mode="out-in"><div class="box" :key="achievement">{{achievement}}</div></transition-group>',
};

new Vue({
    el: '#app',
    data: {
    achievements: ['Title1', 'Title2', 'Title3', 'Title4']
  },
  created() {
    this.autoRotateArr();
  },
  components: {
    'box': Box
  },
  methods: {
    leftRotateArr() {
        this.achievements.push(
          this.achievements.shift()
    )},
    autoRotateArr() {
      this.interval = setInterval(() => this.leftRotateArr(), 3000);
    }
  }
})

.hero {
    height: 50px;
}
.box-wrapper {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  padding: 50px;

}

.box {
  height: 50px;
  background-color: orange;
  margin: 10px 0;
}

.slide-up-enter-active {
  transition: all 666ms ease-out ;
}

.slide-up-enter {
  transform: translateY(50px);
}

.slide-up-leave-active {
  transition: all 0.4s ease-in;
}
.slide-up-leave-to {
  transform: translateY(-50px);
}
.slide-move {
  transition: all 0.5s ease;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
  <div class="hero">
    <box :achievement="achievements[0]"></box>
  </div>
  <div class="box-wrapper">
     <div><button @click="leftRotateArr">Up</button></div>
      <box v-for="achievement in achievements" :achievement="achievement" :key="achievement"></box>
  </div>
  
</div>

Answer 2

在上面 Michal Levý 评论的帮助下，我得到了预期的行为 transition-group