Question

我正在尝试在vuejs中进行转换，但这仅在结束时有效，并且只有请假转换有效，enter转换无效

<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

此处的关键是在过渡标记上添加外观属性，以强制Vue在最初呈现过渡时应用过渡。

这是一个有效的示例： 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

vuejs在for循环内转换

1 个答案: