移动内容时的 Vue 过渡

Question

我在尝试转换内容转换时遇到了问题。本质上，我的数据数组显示在 DOM 的不同部分，具体取决于state。

基本概念：

---

打开

• 反馈 1 [完成]
• 反馈 2 [完成]
• 反馈 3 [完成]

关闭

---

我想达到的目标： 当您按“关闭”时，反馈会从 OPEN 淡出并在 CLOSED 部分下淡入

这是我尝试过的：使用过渡渲染“已关闭”项目：

<transition name="fade">
  <v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
    <p>
    {{ feedbackItem.feedback }}
    </p> 
    </v-row> 
</transition>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

但它不能按需要工作（没有可见的过渡），如果有多个已关闭的项目，“已关闭”下的元素甚至会被隐藏。我认为这与计算项目列表的呈现方式有关。可能v-if="feedbackItem.state ==='closed'" 行会导致问题。有谁知道如何最好地达到预期的结果或我做错了什么？

可以使用的 Codepen 是 here。

感谢任何抽出时间思考的人！

Answer 1

循环时需要使用transition group:

<transition-group name="fade" tag="div">
  <v-row v-if="feedbackItem.state ==='closed'" v-for="feedbackItem in closedTasks" :key="feedbackItem.id">
    <p>
      {{ feedbackItem.feedback }}
    </p> 
  </v-row> 
</transition-group>

您可以阅读更多here。

tag="div" 是包装项目列表的元素。

只是一个提示，同时使用 v-if 和 v-for 是一种不好的做法。你最好有一个computed 属性来过滤你想要循环的项目。