Vue.js 循环中元素上的VueJS转换？

这是我的代码：每次数据更新时，我都要在HelloWorld组件上创建一个转换。过渡本身工作正常

  <transition name="fade">
    <p v-if="awesome">Vue is awesome</p>
  </transition>

Vue真是太棒了

这是我的“卡片”，它们是动态创建的

  <v-row no-gutters>
    <v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
      <v-card class="pa-2" outlined tile>
        <transition name="fade">
          <HelloWorld
            v-bind:todos="todos"
            v-bind:index="index"
            v-bind:class="(todos[index].done)?'green':'red'"
          />
        </transition>
      </v-card>
    </v-col>
  </v-row>

在这里，过渡不起作用

CSS在这里：

<style scoped>
.top {
  background: blue;
  color: white;
  display: flex;
  justify-content: space-around;
  border-bottom: 2.5px solid black;
}

.fade-enter {
  opacity: 0;
}

.fade-enter-active {
  transition: opacity 1s;
}

.fade-leave {
}

.fade-leave-active {
  transition: 1s;
  opacity: 0;
}
</style>

.顶{
背景：蓝色；
颜色：白色；
显示器：flex；
证明内容：周围的空间；
边框底部：2.5px纯黑；
}
.淡入{
不透明度：0；
}
。淡入激活状态{
过渡：不透明度1s；
}
.淡出{
}
.淡入淡出激活状态{
过渡：1s；
不透明度：0；
}

---

为什么以及如何使其工作？

如果要为循环中的每个元素设置动画，必须：

• 在循环周围放置

  转换
  

• 此外，使用
  ，而不仅仅是

如果动画为twitchy，则可以添加

position:absolute中输入
和
保留到
CSS规则（或仅用于
保持活动状态
）

在vue文档中查看此页面：


您需要进行多个编辑：

使用
而不是

使用
包装

将
class=“row”
添加到
中
将索引
替换为的todo对象内的唯一键
示例
todo.id
或
todo.randomKey
。使用
索引
作为键
根本不用钥匙
谢谢你，转换很有效，但是它完全弄坏了我的卡片宽度：-/@DataMastery很高兴我能帮忙。我更新了问题（在底部）试一下。@DataMastery你也可以试着放置
position:absolute仅在
类中。淡入保持活动状态
类而不是其他两个类中，这可能会改变它的外观，因为在转换期间它将仅为
绝对状态
，您可以在提供的vue文档页面上看到它的演示
<v-row no-gutters>
  <transition-group name="fade" mode="out-in">
    <v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" v-bind:key="index">
      <v-card class="pa-2" outlined tile>
        <HelloWorld
          v-bind:todos="todos"
          v-bind:index="index"
          v-bind:class="(todos[index].done)?'green':'red'"
        />
      </v-card>
    </v-col>
  </transition-group>
</v-row>

.fade-in-enter-active {
  transition: all 0.5s ease;
}

.fade-in-leave-active {
  transition: all 0.5s ease;
}

.fade-in-enter, .fade-in-leave-to {
  position: absolute; /* add for smooth transition between elements */
  opacity: 0;
}

<v-row no-gutters>
  <transition-group name="fade" class="row">
    <v-col cols="12" sm="4" md="4" v-for="(todo, index) in todos" :key="todo.randomKey">
      <v-card class="pa-2" outlined tile>
        <HelloWorld
          v-bind:todos="todos"
          v-bind:index="index"
          v-bind:class="(todos[index].done)?'green':'red'"
        />
      </v-card>
    </v-col>
   </transition-group>
 </v-row>