CSS Animation when Div is added in Vue v-for list

Issue

I had a vue list like below:

<div v-for="item in items">
   <div class="animation">{{ item.name }}</div>
</div>

And my animation is

@keyframes loadingComment {
    0% {
        opacity: 0.6 !important;
    }
    99% {
        opacity: 0.6 !important;
    }
    100% {
        opacity: 1;
    }
}

However when I add an animation to to item it starts the animation whenever the page loads even tho there are 0 items inside the array. I want the animation to play when the item is added to the items array. Any ideas? I assumed this is how it would work as default?

Thanks, Jamie

Solution

first, you need to wrap your entire list section in a transition-group if you want to add animation to your list. Read more here

<transition-group name="list">
  <div v-for="item in items" :key="item.id">
     <div class="animation">{{ item.name }}</div>
  </div>
</transition-group>

you need to specify a name for your transition. in that way you can control your animation style in CSS.<transition-group name="list">

If you only want to use fade animation you can use transitions for that. no need for keyframes. something like this:

.list-enter-active, .list-leave-active {
  opacity: 1;
  transition: opacity .5s;
}
.list-enter, .list-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

but if you really want to use keyframes, in your example you can do something like this:

.list-enter-active, .list-leave-active {
   animation: loadingComment 0.5s ease-in-out forwards;
}
@keyframes loadingComment {
  0% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

also, you can see the result in this jsfiddle link jsfiddle demo

Answered By - Nakazaki