移动内容时 Vue 转换

Question

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

基本概念：

打开

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

关闭

我努力实现的目标： 当您按下 "close" 时，反馈从 OPEN 淡出并在 CLOSED 部分淡入

这是我尝试过的： 渲染 "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>

但它不能按需工作（没有可见的过渡），如果有多个关闭项，"Closed" 下的元素甚至会隐藏。我认为这与计算项目列表的呈现方式有关。可能行 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 属性来过滤你想要循环的项目。

移动内容时 Vue 转换

Vue transitions when shifting content

javascript

transition

css-transitions

vue.js