Как сделать плавный переход между элементами выводимого списка?

Question

[VegasChickiChicki]

Почитал документацию, сделал все как написано, там есть момент, который гласит, что нужно повесь ключ, я его повесил ,но все равно ничего не получается(
При чем очень странно, что в пропсах тега transition пусто, хотя класс прописан (прикрепил фото)

Вот код:

<transition name="fade" mode="out-in">
            <div class="project"
                 v-for="(project,index) in projects"
                 v-if="projectIndex === index"
                 key="index">
            </div>
 </transition>

Не могу понять, что я упускаю?
Вот код css стилей(Sass):

.fade-enter-active, .fade-leave-active
  transition: opacity .5s

.fade-enter, .fade-leave-to
  opacity: 0

Answer 1

[Dima Polos]

:key=index
Вообще желательно что-то придумать, чтобы key был более уникальный.
Ответ - пропустили двоеточие перед key.

Comments

[VegasChickiChicki]

Ох ,вы мой спаситель! А что можно придумать более уникальное ? Там выводится список проектов ,из можно будет добавлять и удалять ,мне генерировать его как то? И почему индекс не желателен?

[nvdfxx]

VegasChickiChicki, потому что при добавлении не в конец списка или удалении не из конца списка эти индексы переопределятся, и вуе не будет понимать, какой элемент анимировать

[VegasChickiChicki]

nvdfxx, Понял ,спасибо ,учту.