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。这是一个工作示例：&nbsp;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