javascript - 移动内容时 Vue 进行转换

Question

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

基本概念:

<小时/>

打开

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

关闭

<小时/>

我想要实现的目标:当您按“关闭”时，反馈会从“打开”部分淡出并在“关闭”部分下淡入

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

<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>

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

可以使用的 Codepen 是 here .

感谢所有抽出时间来思考的人!

Answer 1

进行循环时，需要使用转换组:

<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 是一种不好的做法。您最好有一个compated属性来过滤您想要循环的项目。