for循环内的vuejs转换

Question

我正在尝试在 vuejs 中进行过渡，但这仅在结束时有效，并且只有离开过渡有效，输入过渡无效<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