VueJS在循环中的元素上转换？答案

【问题标题】：VueJS transition on element in a loop?VueJS在循环中的元素上转换？
【发布时间】：2019-12-08 14:47:35
【问题描述】：

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

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

这是我动态创建的“卡片”。

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

为什么以及如何让它发挥作用？

【问题讨论】：

标签： vue.js transition

【解决方案1】：

如果你想在循环中为 each 元素设置动画，你必须：

将transition 放在循环周围。
另外，使用<transition-group>，而不仅仅是<transition>

<v-row no-gutters>
  <transition-group name="fade-in" 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>

我还建议你不要使用1s 长动画，它太长了。做这样的事情：

CSS

.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;
}

如果动画是抽搐的，你可以在enter和leave-to CSS规则中添加position: absolute;（或仅用于leave-active）。

在 vue 文档中查看此页面：https://vuejs.org/v2/guide/transitions.html#List-Move-Transitions

【讨论】：

谢谢，过渡有效，但它完全破坏了我的卡片宽度：-/
@DataMastery 很高兴我能提供帮助。我更新了问题（在底部）尝试一下。
@DataMastery 您也可以尝试将position: absolute; 仅放在.fade-in-leave-active 类中而不是其他两个类中，这可能会改变它的外观，因为在过渡期间它只会是absolute，您可以在提供的 vue 文档页面上看到它的演示
只是给遇到此问题的其他人的说明，在使用此示例时，我需要将“name”属性更改为“fade-in”。

【解决方案2】：

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

您需要进行多次编辑：

使用<transition-group> 而不是<transition>。
使用<transitiono-group>包装<v-col>。
将class="row" 添加到<transition-group>。
将index 替换为待办事项对象中的唯一键例如todo.id 或todo.randomKey。使用index 作为键就像根本不用钥匙。

【讨论】：