CSS Анимация при добавлении Div в список Vue v-for

Question

У меня был список vue, как показано ниже:

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

И моя анимация

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

Однако, когда я добавляю анимацию к элементу, она запускает анимацию всякий раз, когда страница загружается даже если в массиве 0 элементов. Я хочу, чтобы анимация воспроизводилась при добавлении элемента в массив элементов. Любые идеи? Я предполагал, что так будет работать по умолчанию?

Спасибо, Jam ie

Answer 1

Во-первых, вам нужно обернуть весь раздел списка в группу переходов, если вы хотите добавить анимацию в свой список. Подробнее здесь

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

вам необходимо указать имя для вашего перехода. таким образом, вы можете управлять своим стилем анимации в CSS. <transition-group name="list">

Если вы хотите использовать только анимацию затухания, вы можете использовать переходы для этого. нет необходимости в ключевых кадрах. примерно так:

.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;
}

, но если вы действительно хотите использовать ключевые кадры, в вашем примере вы можете сделать что-то вроде этого:

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

также, вы можете увидеть результат в этом jsfiddle link jsfiddle demo