为什么我的 Vue 过渡没有效果？答案

【问题标题】：Why does my Vue transition have no effect?为什么我的 Vue 过渡没有效果？
【发布时间】：2021-07-02 10:18:28
【问题描述】：

我使用 vue 和 Axios 来读取书名的 RSS 提要并将它们显示在列表中。用户有一个搜索框来过滤列表中的结果。这很好用。

但是，过渡没有任何效果。

HTML 索引文件

<ul class="booklist">
  <my-book
          v-for="book in bookFeed"
          v-bind:id="book.id"
          v-bind:title="book.node_title"
          v-bind:body="book.body"
          v-bind:path="book.path"
          v-bind:author="book.author"
          v-bind:coverimg="book.medium_img" >
  </my-book>
</ul>

Vue js 文件

Vue.component('my-book', {
  props: ['title','body','coverimg','id','path','author'],
  template: `
     <transition name='section'>
       <li class="row-animated border-bo-dd mb10 pb10 imgshadow" >
         ...html content of a single book item
       </li>
     </transition> 
   `
});

CSS 文件

.section-leave-active,
.section-enter-active {
  transition: .5s;
}
.section-enter {
  transform: translateY(100%);
}
.section-leave-to {
  transform: translateY(-100%);
}

知道我的错误在哪里吗？谢谢你的任何提示。罗兹

【问题讨论】：

<transition>'s 后面应该有一个带有v-if 的元素，除非它显然是一个路由转换

标签： vue.js transition

【解决方案1】：

尝试使用transition-group 组件并放置它而不是ul 标签：

<transition-group name="section" tag="ul" class="booklist">

  <my-book
          v-for="book in bookFeed"
          v-bind:id="book.id"
          v-bind:title="book.node_title"
          v-bind:body="book.body"
          v-bind:path="book.path"
          v-bind:author="book.author"
          v-bind:coverimg="book.medium_img" >
  </my-book>

</transition-group>

【讨论】：