for循环内的vuejs转换

我正在尝试在 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;

}



慕雪6442864
浏览 198回答 1
1回答

梦里花落0921

这里的关键是在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
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript