Why does my Vue transition have no effect?

Question

I use vue with Axios to read an RSS feed of book titles and display them in a list. Users have a search box to filter the results in the list. This works fine.

However, the transition does not have any effect.

HTML index file

<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 file

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 file

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

Any idea where my mistake is? Thank you for any hint. rhodes

<transition>'s should be followed by an element with v-if on it, unless obviously its a route transition — Lawrence Cherone

Boussadjra Brahim Boussadjra Brahim · Accepted Answer · 2021-04-06T15:53:31

Try to use transition-group component and place it instead of ul tag like :

<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>

Why does my Vue transition have no effect?

1 Answers