for循环内的vuejs转换

Question

我正在尝试在 vuejs 中进行过渡，但这仅在 for 结束时有效，并且只有离开过渡有效，输入过渡无效

<template v-for="(item, index) in imagesList">
  <transition name="fade">
    <div class="ctn">
      <div class="thumbnail">
        <img :src="item.url" :alt="item.alt" :title="item.title">
      </div>
      <div class="info">
        <p>{{ item.info }}</p>
      </div>
    </div>
  </transition>
</template>

css 代码来自 vuejs 文档：

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

Answer 1

这里的关键是在transition标签上添加appear属性，强制Vue在初始渲染时应用transition。

这是一个工作示例： https://codesandbox.io/s/vue-template-rjmi9?fontsize=14&hidenavigation=1&theme=dark

您可能需要在 IDE 浏览器中单击“刷新”才能看到转换。取决于您的浏览器加载 IDE 本身的速度。

更多信息请访问：https://vuejs.org/v2/guide/transitions.html#Transitions-on-Initial-Render

您可能还需要考虑使用<transition-group>，具体取决于您的需要。信息可以在这里找到：https://vuejs.org/v2/guide/transitions.html#List-Transitions